SegmentedControl

SegmentedControl is used to pick one choice from a linear set of closely related choices, and immediately apply that selection.

Page navigation navigation

A SegmentedControl is treated like a list where each list item contains a button.

Do not treat a SegmentedControl like any of the following ARIA roles:

These roles have different keyboard rules and may confuse assistive tech users if used for SegmentedControls.

Keyboard navigation

Tab

Tab navigates through focusable elements. When entering the control:

  • Focus goes to the first button if coming from before the control.
  • Focus goes to the last button if coming from after the control.

Enter or Space

Selects a focused, unselected button. Pressing again on a selected button does nothing.

Arrow Left or Arrow Right

Arrow keys don't change focus or selection, unlike in radio groups or toolbars.

Touch targets

Ensure buttons have sufficient touch target size for touch devices. The entire touch area should respond to taps, clicks, and hovers even if it isn't directly on the control.

Edit in Figma