Field
Composition for a labelled control — set, group, row, label, description, error.
The form composition layer ported from Atlas. Field does not render a control — it wraps
one (Input, Checkbox, later Select) with a label, optional description, and an error that
announces as role="alert". FieldRow is the horizontal pairing for checkboxes and radios.
We will use this for account updates.
Enter a display name.
Checkbox row
FieldRow plus FieldLabel htmlFor makes the label part of the hit target.
Required to create an account. The label is associated via htmlFor.
Fieldset
FieldSet / FieldLegend group related controls. Legend variant="label" drops to
label-sized type.
Usage
import { Field, FieldLabel, FieldDescription, FieldError } from '@/components/ui/field';
import { Input } from '@/components/ui/input';
<Field>
<FieldLabel htmlFor="email">Email</FieldLabel>
<Input id="email" type="email" aria-describedby="email-help" />
<FieldDescription id="email-help">Account updates only.</FieldDescription>
</Field>Also exports FieldSet, FieldLegend, FieldGroup, FieldRow, FieldContent,
FieldTitle, FieldSeparator. FieldSeparator is the kit Separator.
Install
shadcn add @gesso/field