Field
Form-field wrapper composing label, control, description, and error
Category: inputs · WCAG 2.2-AA · form, layout, validation, accessibility
States
- default
- disabled
- invalid
Props
| Prop | Type | Default | Description |
|---|---|---|---|
label | ReactNode | — | Text label for the control. |
hint | ReactNode | — | Alias of `description` — the name the eight form controls use for the same supporting text. Neither is deprecated. |
description | ReactNode | — | Supporting text under the control, wired via aria-describedby. `hint` is accepted as an alias. |
error | ReactNode | — | Error message shown when the value is invalid. |
required | boolean | false | When true, marks the field as required. |
disabled | boolean | false | When true, disables the control and removes it from the tab order. |
id | string | — | Id applied to the root element (auto-generated when omitted). |
children | ReactElement | — | Content rendered inside the component. |
Design tokens
--cascivo-space-2--cascivo-font-sans--cascivo-text-sm--cascivo-leading-snug--cascivo-color-text-muted--cascivo-color-destructive
When to use
- Pairing a single control with its label, helper text, and validation message
- Wiring aria-describedby / aria-invalid automatically instead of by hand
When not to use
- A standalone control that needs no label, description, or error
- Grouping multiple related controls — use a <fieldset> with a <legend>
How to build an accessible Field in React →
Examples
Basic
<Field label="Email"><Input type="email" /></Field>With description
<Field label="Email" description="We never share it."><Input /></Field>With error
Sets aria-invalid on the control and announces the error via role="alert".
<Field label="Email" error="Email is required" required><Input /></Field>