Docs Components
SegmentedControlexperimental
A compact switch for changing how the same data is presented — list or grid, chart or table, desktop or TV. It never navigates.
API
| Prop | Type | Description |
|---|---|---|
items required | {id, label}[] | 2–5 segments. |
value required | string | Active segment id (controlled). |
onValueChange required | function | Receives the next id. |
aria-label required | string | Names the group; buttons carry aria-pressed. |
Design specifications
- frame
color-border-rule / radius-sm - active
color-bg-inverse / color-text-inverse - divider
color-border-hairline - font
type-body-sm / weight-medium
Guidelines
- must-notIf a segment navigates to a different route, it is Tabs or nav — not a segment.
- shouldMore than 5 options belongs in a Select.