Field
Layout wrapper that composes label, description, error, and control in vertical or horizontal orientation.
Install
Import path
Examples
Checkbox
Combine labels, controls, and help text to compose accessible form fields and grouped inputs.
Your Desktop & Documents folders are being synced with iCloud Drive. You can access them from other devices.
Choice Card
Wrap Field components inside FieldLabel to create selectable field groups. This works with RadioItem, Checkbox and Switch components.
Fieldset
Combine labels, controls, and help text to compose accessible form fields and grouped inputs.
Field Group
Stack Field components with FieldGroup. Add FieldSeparator to divide them.
Input
Combine labels, controls, and help text to compose accessible form fields and grouped inputs.
Radio
Combine labels, controls, and help text to compose accessible form fields and grouped inputs.
Responsive Layout
Field layouts adapt responsively to their container.
RTL
Right-to-left layout support for languages such as Arabic and Hebrew.
Translations are AI-generated for demonstration and may be imperfect.
Select
Combine labels, controls, and help text to compose accessible form fields and grouped inputs.
Select your department or area of work.
Slider
Combine labels, controls, and help text to compose accessible form fields and grouped inputs.
Set your budget range ($200 - 800).
Switch
Combine labels, controls, and help text to compose accessible form fields and grouped inputs.
Textarea
Combine labels, controls, and help text to compose accessible form fields and grouped inputs.
Anatomy
How the parts compose. Copy this skeleton and fill in the slots.
import {
Field, FieldLabel, FieldDescription, FieldError,
} from "@codefast/ui/field";
<Field>
<FieldLabel htmlFor="email">Email</FieldLabel>
<Input id="email" aria-invalid={invalid} />
<FieldDescription>Helper text</FieldDescription>
{invalid && <FieldError>Required.</FieldError>}
</Field>
API reference
Props for each part of the component. All native element props are also forwarded.
Field
Vertical wrapper that lays out a label, control, description, and error.
| Prop | Type | Default | Description |
|---|---|---|---|
| orientation | "vertical" | "horizontal" | "vertical" | Stack the control under the label, or beside it. |
FieldLabel / FieldDescription / FieldError
The text parts. Render FieldError conditionally when the field is invalid.
| Prop | Type | Default | Description |
|---|---|---|---|
| htmlFor | string | — | On FieldLabel, points at the control id for an accessible name. |
FieldSet / FieldLegend / FieldGroup
Group several related fields under a legend.
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | — | FieldLegend titles the set; FieldGroup spaces fields evenly. |
Accessibility
Built to be keyboard-navigable and screen-reader friendly out of the box.
- FieldLabel forwards htmlFor — always link it to the control’s id.
- Set aria-invalid on the control and render FieldError so the error is announced.
- Use FieldSet + FieldLegend for groups of checkboxes or radios.
Guidelines
Conventions that keep usage consistent across an app.
Do
- Pair every control with a FieldLabel.
- Show errors next to the field, on submit or on blur — not only as a toast.
Don’t
- Don’t rely on the red ring alone — always give a text error.
- Don’t use placeholder text as the label.