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 { Field, FieldDescription, FieldLabel } from "@/components/ui/component";
import { Select, SelectItem, SelectPopup, SelectTrigger, SelectValue } from "@/components/ui/select";
const items = [
{ label: "Select a country", value: null },
{ label: "United States", value: "us" },
{ label: "United Kingdom", value: "uk" },
{ label: "Canada", value: "ca" },
{ label: "Australia", value: "au" },
];
export default function FieldSelectDemo() {
return (
<div className="flex min-h-screen w-full items-center justify-center bg-background p-8">
<div className="w-full max-w-sm">
<Field>
<FieldLabel>Country</FieldLabel>
<Select items={items}>
<SelectTrigger><SelectValue /></SelectTrigger>
<SelectPopup>
{items.map(({ label, value }) => (
<SelectItem key={String(value)} value={value}>{label}</SelectItem>
))}
</SelectPopup>
</Select>
<FieldDescription>This is an optional field</FieldDescription>
</Field>
</div>
</div>
);
}