How to build an accessible SegmentedControl in React

Wraps role="radio" buttons in a role="group" with aria-checked marking the selected segment, and ArrowLeft/ArrowRight move selection across enabled segments (skipping disabled ones) so keyboard users get standard single-choice navigation.

When to use a SegmentedControl

• 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 it

• 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

Keyboard interactions

Role group, verified at WCAG 2.2-AA.

• ArrowLeft
• ArrowRight

Common mistakes

Avoid: Two <Button> elements toggling which is "active" via app state

Prefer: <SegmentedControl options={[{label:"Day",value:"day"},{label:"Week",value:"week"}]} value={range} onValueChange={setRange} />

A pair of buttons does not convey exclusive selection; SegmentedControl uses radio semantics with aria-checked and arrow-key navigation so the single-choice state is announced

Example

<SegmentedControl options={[{label:'Day',value:'day'},{label:'Week',value:'week'},{label:'Month',value:'month'}]} value="day" onValueChange={() => {}} />

See the full SegmentedControl reference →