FormLayout
Markdown for agentsGroups form fields with even, tokenized spacing: vertical stack, horizontal row, or 1-4 column grid, optionally as a semantic fieldset.
npx slipstream-ui@latest add form-layoutGrid (2 columns)
Stack and row
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| layout | 'stack' | 'row' | 'grid' | 'stack' | Even vertical stack, horizontal row, or column grid. |
| columns | 1 | 2 | 3 | 4 | 2 | Grid column count (literal classes survive CSS purging). |
| gap | 'none' | 'sm' | 'md' | 'lg' | 'xl' | number | — | Even spacing — token or exact pixels (16). |
| legend | string | — | Group label rendered as a semantic <legend> (fieldset mode). |
| description | string | — | Supporting line under the legend (fieldset mode). |
| as | 'div' | 'fieldset' | 'div' | Render as a semantic fieldset when the layout wraps related controls. |
Accessibility
- Fieldset mode gives the group a name via a real <legend>.
- Reading order equals DOM order — row/grid layouts reflow visually only.
- Space fields with gap tokens — never spacer divs that drift from the scale.
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.