Field
shadcn/uiComposable form field components for building accessible forms.
Field
import { Field, FieldDescription, FieldGroup, FieldLabel, FieldLegend, FieldSet } from "@/components/optics/field";import { Input } from "@/components/optics/input";<div className="w-full max-w-md"> <FieldGroup> <FieldSet> <FieldLegend> Payment Method </FieldLegend> <FieldDescription> All transactions are secure and encrypted </FieldDescription> <FieldGroup> <Field> <FieldLabel htmlFor="demo-card-name"> Name on Card </FieldLabel> <Input id="demo-card-name" placeholder="John Doe" required variant="raised" /> </Field> <Field> <FieldLabel htmlFor="demo-card-number"> Card Number </FieldLabel> <Input id="demo-card-number" placeholder="1234 5678 9012 3456" required variant="raised" /> <FieldDescription> Enter your 16-digit card number </FieldDescription> </Field> </FieldGroup> </FieldSet> </FieldGroup></div>import { Field, FieldDescription, FieldGroup, FieldLabel, FieldLegend, FieldSet } from "@/components/optics/field";import { Input } from "@/components/optics/input";<div className="w-full max-w-md"> <FieldGroup> <FieldSet> <FieldLegend> Payment Method </FieldLegend> <FieldDescription> All transactions are secure and encrypted </FieldDescription> <FieldGroup> <Field> <FieldLabel htmlFor="demo-card-name"> Name on Card </FieldLabel> <Input id="demo-card-name" placeholder="John Doe" required variant="raised" /> </Field> <Field> <FieldLabel htmlFor="demo-card-number"> Card Number </FieldLabel> <Input id="demo-card-number" placeholder="1234 5678 9012 3456" required variant="raised" /> <FieldDescription> Enter your 16-digit card number </FieldDescription> </Field> </FieldGroup> </FieldSet> </FieldGroup></div>Installation
pnpm dlx shadcn@latest add @optics/field
Props
<Field />
Name | Type | |
|---|---|---|
orientation | string(default: vertical) |
<FieldError />
Name | Type | |
|---|---|---|
errors | string(default: []) |
<FieldLegend />
Name | Type | |
|---|---|---|
variant | string(default: legend) |