Field
shadcn/ui
v4 only
Form field wrapper — label, description, error. Replaces the old FormField pattern in shadcn v4.
@/components/ui/fieldStates
| State | Preview | Token |
|---|---|---|
| Default | One-line summary. | label: text-sm · description: text-muted-foreground |
| Invalid | Must be a valid email address. | data-invalid on Field → label turns text-destructive |
| Disabled | Auto-generated — cannot be changed. | disabled on Input — opacity-50 from Input styles |
Orientations
vertical (default) — label above
horizontal — label beside (checkbox/switch rows)
In context — new ticket form
New ticket
Must be a valid email address.
Sub-components
| Component | Role |
|---|---|
| Field | Root wrapper — sets orientation context and data-invalid flag |
| FieldLabel | Label element — turns red when Field has data-invalid |
| FieldDescription | Helper text below input — text-muted-foreground text-sm |
| FieldError | Error message — shown when data-invalid. accepts errors={[{message}]} |
| FieldGroup | Vertical stack of Fields — consistent gap between rows |
| FieldSet | Groups related fields with a legend — renders as <fieldset> |
| FieldLegend | Heading for a FieldSet — renders as <legend> |
Field works standalone or with react-hook-form. For RHF: wrap with Controller and pass data-invalid={fieldState.invalid} to Field.
On this page