Components
Loading preview...
A form field wrapper that provides labeling, description, and validation messaging for any input control. Supports required fields, disabled states, error messages, and real-time validity tracking via Base UI primitives.
npx shadcn@latest add https://21st.dev/r/coss.com/fieldimport type React from "react";
import { cn } from "@/lib/utils";
import {
Field,
FieldDescription,
FieldError,
FieldLabel,
} from "@/components/ui/component";
function Input({
className,
...props
}: React.InputHTMLAttributes<HTMLInputElement>) {
return (
<span
className={cn(
"relative inline-flex w-full rounded-lg border border-input bg-background text-sm text-foreground shadow-sm transition-shadow has-focus-visible:ring-[3px] has-focus-visible:ring-ring/24 has-[:disabled]:opacity-50",
className,
)}
data-slot="input-control"
>
<input
className="h-8 w-full min-w-0 rounded-[inherit] bg-transparent px-3 leading-8 outline-none placeholder:text-muted-foreground/60 disabled:cursor-not-allowed"
{...props}
/>
</span>
);
}
export default function FieldDemo() {
return (
<div className="flex min-h-screen w-full items-center justify-center bg-background p-8">
<div className="flex w-full max-w-sm flex-col gap-6">
<Field>
<FieldLabel>Name</FieldLabel>
<Input placeholder="Enter your name" type="text" />
<FieldDescription>Visible on your profile</FieldDescription>
</Field>
<Field>
<FieldLabel>
Password <span className="text-destructive-foreground">*</span>
</FieldLabel>
<Input placeholder="Enter password" required type="password" />
<FieldError>Please fill out this field.</FieldError>
</Field>
<Field disabled>
<FieldLabel>Email</FieldLabel>
<Input disabled placeholder="Enter your email" type="email" />
<FieldDescription>This field is currently disabled.</FieldDescription>
</Field>
</div>
</div>
);
}