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.
import { Checkbox } from "@/components/ui/checkbox"; import { Field, FieldLabel } from "@/components/ui/component"; export default function FieldCheckboxDemo() { 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> <Checkbox /> Accept terms and conditions </FieldLabel> </Field> </div> </div> ); }
Part of coss — browse the full library on 21st.dev.