FormField
Markdown for agentsLabel + control + hint/error in one unit with htmlFor, aria-describedby, and aria-invalid wiring applied automatically.
npx slipstream-ui@latest add form-fieldHint & error states
We never share your email
Password must be at least 8 characters
Max 280 characters
A small form
Optional — used on invoices
Enter a valid URL (https://…)
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| id | string | required | The control's id — shared with the label's htmlFor and hint/error ids. |
| label | string | required | Visible label text (kept for screen readers when labelHidden). |
| hint | string | — | Helper text under the control, wired via aria-describedby. |
| error | string | — | Validation error; replaces the hint, sets aria-invalid, announced via role=alert. |
| required | boolean | false | Renders the required marker next to the label. |
| labelHidden | boolean | false | Keeps the label sr-only while hiding it visually. |
| children | ReactNode | — | Exactly one control element — id/aria wiring is cloned onto it. |
Accessibility
- Label pairs via htmlFor/id automatically.
- aria-describedby points at the hint — or the error when one is present.
- Errors render with role=alert and flip aria-invalid on the control.
- The required asterisk is aria-hidden; native required comes from the control itself.
Browser support
| Browser | Tested versions |
|---|---|
| Chrome | 111+ (Mar 2023) |
| Edge | 111+ (Mar 2023) |
| Firefox | 121+ (Dec 2023) |
| Safari | 17.2+ — macOS & iOS (Dec 2023) |
Slipstream components rely only on CSS custom properties, Flexbox/Grid, and ARIA — the everyday baseline of the last two years of evergreen releases. Anything newer is progressive enhancement: unsupported browsers keep full functionality with static behavior instead of animations.
- id/aria cloning and role=alert are plain DOM — works in every supported browser.