imitation
SegmentedControl
A compact row of segments where exactly one is selected.
Calendar rangeArrow keys move the selection, Home and End jump
In context
HoursSwitch the card between this week and the whole team
Hours logged
MC
Maya Chen
31 h
Chips
variant chipsLoose filled chips that wrap, the active one in the primary colour: a filter row. --rebar-chips-* tokens set size and fill.
Props
| Prop | Type | Required | Default |
|---|---|---|---|
options | SegmentedControlOption[] | Yes | — |
value | string | undefined | No | — |
defaultValue | string | undefined | No | — |
onValueChange | ((value: string) => void) | undefined | No | — |
disabled | boolean | undefined | No | — |
scrollable | boolean | undefined | No | false |
variant | "segmented" | "chips" | undefined | No | segmented |
bionic | boolean | undefined | No | — |
bionicOptions | BionicOptions | undefined | No | — |
Accessibility
A real ARIA radio group: arrow keys (not Tab) move the selection between segments, Home/End jump to the first/last, matching the WAI-ARIA Authoring Practices radio-group pattern — the same keyboard model native radio buttons have.
data-rebar-* attributes
data-rebar-component="segmented-control"; data-rebar-part="item" per option, data-rebar-active on the selected one.
Migrating to Ant Design
A close, low-risk rename — AntD's Segmented takes the same options/value shape.
Scrollable
scrollable keeps one row that scrolls horizontally with snap (no wrapping, no squeezing) for many or long labels; the selected segment is scrolled into view.
<SegmentedControl scrollable options={months} />