Segmented control

Accessibility

SegmentedControl from @prepared911/ui/segmented-control is a compact cluster that maps to radio-group semantics. The primitive wires roles and keyboard behavior; your job is to label the control, keep labels short, and ensure icon-only segments carry accessible names.

What the component handles

Radio-group semantics. Root is role="radiogroup"; items are role="radio" with aria-checked.
Keyboard navigation. Arrow keys move between segments; Home/End jump to ends.
Automatic selection. Arrow navigation typically selects as it moves, matching the compact-control expectation.
Disabled state. Disabled controls expose aria-disabled and are skipped.

What you must provide

Group label. Use aria-labelledby (pointing at a visible heading) or aria-label.
Accessible names on icon-only segments. When a segment renders only an icon, the icon's title or a sibling aria-label supplies the name.
Parallel wording. Short, parallel labels scan quickly and translate cleanly.

Keyboard behavior

Tab moves focus into the control.
Arrow Left / Right (and Up / Down in vertical layouts) move and select between segments.
Home / End jump to first / last.
Enter / Space select the focused segment (when automatic selection is disabled).

Semantics and roles

Root → role="radiogroup" with aria-orientation.
Segments → role="radio" with aria-checked.
Icons inside segments should be marked aria-hidden="true" when a text label provides the name.

Known caveats

Too many segments. Six or more options don't fit the pattern. Use a Select or ToggleGroup with overflow.
Long labels. Labels that wrap break the visual rhythm and are a sign the segment needs to be shorter or the whole control needs to be replaced.

Segmented Control / API and Development

Select / Usage

On this page

What the component handles

What you must provide

Keyboard behavior

Semantics and roles

Known caveats

Segmented control

Accessibility

What the component handles

Radio-group semantics. Root is role="radiogroup"; items are role="radio" with aria-checked.
Keyboard navigation. Arrow keys move between segments; Home/End jump to ends.
Automatic selection. Arrow navigation typically selects as it moves, matching the compact-control expectation.
Disabled state. Disabled controls expose aria-disabled and are skipped.

What you must provide

Group label. Use aria-labelledby (pointing at a visible heading) or aria-label.
Accessible names on icon-only segments. When a segment renders only an icon, the icon's title or a sibling aria-label supplies the name.
Parallel wording. Short, parallel labels scan quickly and translate cleanly.

Keyboard behavior

Tab moves focus into the control.
Arrow Left / Right (and Up / Down in vertical layouts) move and select between segments.
Home / End jump to first / last.
Enter / Space select the focused segment (when automatic selection is disabled).

Semantics and roles

Root → role="radiogroup" with aria-orientation.
Segments → role="radio" with aria-checked.
Icons inside segments should be marked aria-hidden="true" when a text label provides the name.

Known caveats

Too many segments. Six or more options don't fit the pattern. Use a Select or ToggleGroup with overflow.
Long labels. Labels that wrap break the visual rhythm and are a sign the segment needs to be shorter or the whole control needs to be replaced.

Segmented Control / API and Development

Select / Usage

On this page

What the component handles

What you must provide

Keyboard behavior

Semantics and roles

Known caveats