SegmentedControl
Mutually exclusive toggle group
Category: inputs · WCAG 2.2-AA · form, toggle, group, segmented, input
Sizes
- sm
- md
- lg
States
- idle
- selected
- disabled
Props
| Prop | Type | Default | Description |
|---|---|---|---|
options | SegmentedControlOption[] | — | The selectable options. |
value | string | — | The controlled value. |
onValueChange | (v: string) => void | — | Called with the new value when it changes. |
size | 'sm' | 'md' | 'lg' | md | Visual size of the component (e.g. 'sm', 'md', 'lg'). |
disabled | boolean | false | When true, disables the control and removes it from the tab order. |
ariaLabel | string | — | Accessible name for the group. Invisible — it names the role="group" and renders nothing. The raw DOM `aria-label` still wins over this. |
label | string | — | Alias of `ariaLabel` — same invisible accessible name, the other spelling. Not rendered. |
Design tokens
--cascivo-color-bg-subtle--cascivo-color-border--cascivo-color-surface--cascivo-color-text--cascivo-radius-md--cascivo-radius-sm--cascivo-shadow-sm
When to use
- A compact inline single choice among a few mutually exclusive options (2–5) such as view modes or time ranges
- Switching between alternatives where all options should stay visible in a tight horizontal space
When not to use
- Switching between full panels of page content — use Tabs
- A single binary on/off state — use Toggle
- More options than comfortably fit inline, or options needing descriptions — use Select or RadioCard
How to build an accessible SegmentedControl in React →
Examples
Basic
<SegmentedControl options={[{label:'Day',value:'day'},{label:'Week',value:'week'},{label:'Month',value:'month'}]} value="day" onValueChange={() => {}} />