Components
ToggleGroup
ToggleGroup groups related options. The component consists of a group of buttons that are connected, where only one button can be selected at a time.
We are working to improve the accessibility documentation for this component. If you have questions or see something that should be prioritised, please contact us on Github or Slack.
ToggleGroup uses the standard focus indicator (outline).
We use roving tabindex to manage focus movement between the buttons.
Keyboard interaction
- Tab moves focus to the active toggle button.
- Shift+Tab moves focus to the element before the
ToggleGroupin the tabindex. - Space selects a button.
- Enter selects a button.
- ↑ moves focus to the previous button in the group.
- ← moves focus to the previous button in the group.
- ↓ moves focus to the next button in the group.
- → moves focus to the next button in the group.
- Home moves to the first button in the group.
- End moves to the last button in the group.
Keyboard navigation
- ←/→ moves to the previous/next option (single select)
- Space or Enter activates/toggles the selected option