Form
Markdown for agentsSemantic form element with even-spacing layouts: stacked (default), bordered card, or inline row — native submit and validation untouched.
npx slipstream-ui@latest add formValidated (interactive)
Variants
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | 'default' | 'card' | 'inline' | 'default' | Plain vertical stack, bordered card, or inline row with aligned ends. |
| gap | 'none' | 'sm' | 'md' | 'lg' | 'xl' | number | 'md' | Even spacing between children — token or exact pixels (16). |
| onSubmit | (event) => void | — | Native submit handler — Enter in a text input submits like any form. |
| noValidate | boolean | false | Skip native validation when FormField drives errors. |
Accessibility
- Renders a real <form> — Enter-to-submit, browser validation, and autocomplete work.
- Pair every control with FormField so names, hints, and errors are wired.
- With noValidate you own every message — never silently swallow an invalid state.
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.