Keyboard Navigation

Updated on Apr 23, 2026

The following demo shows the keyboard navigation capabilities of the SegmentedControl. Click the control and use Tab, Enter, or Space to navigate and select items.

Change Theme

Theme

Loading ...

Managing the Focus

The SegmentedControl renders items as native <button> elements inside a container with role="group". Each button is natively focusable and included in the tab sequence of the page. The currently selected item is indicated via aria-pressed="true".

Keyboard Navigation

The SegmentedControl supports the following keyboard shortcuts:

Shortcut	Behavior
Tab	Moves focus to the next focusable item in the page.
Shift+Tab	Moves focus to the previous focusable item in the page.
Enter or Space	Selects the focused item and triggers the change event.

See Also

• SegmentedControl Overview
• Appearance
• API Reference of the SegmentedControl