Forms
Form fields
A visible label, a 48 px control and an optional hint.
Source: components/FormField.tsx
Live
Art Deco
Sunrise
Usage
DoKeep the label visible above the field.
Don’tUse placeholder text as the label.
DoState errors in text next to the field.
Don’tSignal an error with a red border alone.
Accessibility
- Label is tied to the control by id.
- Hints are linked with aria-describedby.
- Controls are 48 px tall. Autocomplete attributes on personal data.
Props
| Name | Type | Note |
|---|---|---|
| id | string | Must match the control's id. |
| label | string | Always visible. |
| hint | string? | Rendered as <id>-hint. |