SegmentedControl
Markdown for agentsSingle- or multi-select segmented control for view and filter switches.
npx @slipstream-ui/cli@latest add segmented-controlAudience filter
Audience (single select)
Selected: investors
Deal type (multi select)
Selected: m&a
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| options | SegmentedOption[] | required | Segments to render: value, label, optional icon and disabled. |
| value | string | string[] | — | Controlled selection. Use string[] when multiple. |
| defaultValue | string | string[] | — | Initial selection when uncontrolled. |
| onValueChange | (value: string | string[]) => void | — | Fires with the next selection. |
| multiple | boolean | false | Allow more than one segment to be active. |
| size | 'sm' | 'md' | 'lg' | 'md' | Control density. |
| fullWidth | boolean | false | Stretch segments to fill the container width. |
Accessibility
- Single-select uses role=radiogroup/radio with aria-checked and arrow-key navigation.
- Multiple uses role=group with aria-pressed on each segment.
- Pass aria-label or aria-labelledby; the default name is generic.
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.