Docs draft
FormField
Component storyFigma component set ↗React component ↗DSDS entity ↗
When to use it
useAny control that needs guidance below it, or an error message when invalid.
API
| Prop | Type | Description |
|---|---|---|
children | ReactNode | The control (Input, Select, a Checkbox group…). |
help | ReactNode | Help text rendered under the control. |
error | ReactNode | Replaces help while present; pair with aria-invalid on the control. |
messageId | string | Give the message an id so the control can aria-describedby it. |
Design specifications
| message | type.caption |
| help-color | color.text.secondary |
| error-color | color.text.negative |
| gap | space.4 |
Accessibility
The message is plain text linked by aria-describedby; error state on the control itself comes from aria-invalid, so the message never needs to shout.