Field
Labels, descriptions and errors for any form control.
Shown in the deployment list.
Installation
npx shadcn@latest add @blank/fieldUsage
import {
Field,
FieldDescription,
FieldError,
FieldGroup,
FieldLabel,
} from "@/components/ui/field"<Field>
<FieldLabel htmlFor="email">Email</FieldLabel>
<Input id="email" type="email" />
<FieldDescription>We never share it.</FieldDescription>
</Field>Every control in the system takes its label, description and error from Field, so there is one layout to learn and one place to fix it.
Examples
Orientation
Build every pull request.
Error
Mark the control with aria-invalid and the field with data-invalid; FieldError takes children or a list of errors straight from a form library.
Lowercase letters, numbers and dashes.
Slugs cannot contain spaces or capital letters.
Choice cards
Wrap a horizontal Field in FieldLabel and the whole card becomes the hit area for its radio or checkbox.
API Reference
Field
Every div prop, plus:
| Prop | Type | Default |
|---|---|---|
orientation | "vertical" | "horizontal" | "responsive" | "vertical" |
FieldLegend
Every legend prop, plus:
| Prop | Type | Default |
|---|---|---|
variant | "legend" | "label" | "legend" |
FieldError
Every div prop, plus:
| Prop | Type | Default |
|---|---|---|
errors | Array<{ message?: string } | undefined> | — |
FieldSet, FieldGroup, FieldContent, FieldLabel, FieldTitle, FieldDescription, FieldSeparator
Layout parts with no props of their own. FieldGroup is a container-query root, which is what orientation="responsive" responds to.