Field
Stacks a 16px label, the control and optional 14px helper text with an 8px gap. FieldRow puts a checkbox or radio beside its label; FieldInline puts the label in a 112px column.
Figma: 10 / Components / FieldShown at the top of the page.
Usage
Source: src/components/ui/field.tsx
import {
Field,
FieldDescription,
FieldError,
FieldInline,
FieldLabel,
FieldRow
} from '@/components/ui/field'<Field>
<FieldLabel htmlFor='headline'>Headline</FieldLabel>
<Input id='headline' />
<FieldDescription>Shown at the top of the page.</FieldDescription>
</Field>With validation
Type an address without a dot to see the error state.
The AI reads this page to learn about your cause.
Field/Row (inline)
Used inside drawers and editors. Stacks on phones.
Field/Select
A Select with its label and helper text.
Who receives the donations.
When to use
When to reach for it, and when to use something else.
Use it for
Complete: Every input, select and textarea in a form.
Complete: FieldInline inside drawers.
Avoid
Not complete: Helper text longer than one sentence.
Not complete: Errors that do not say how to fix the problem.
FieldRow
| Prop | Type | Default | Description |
|---|---|---|---|
| control | ReactNode | – | The Checkbox, RadioGroupItem or Switch. |
| children | ReactNode | – | The label text. |
FieldError
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | – | Renders nothing when empty, so it can stay mounted. |
