Toggle group

The toggle group organizes related action controls into a single, compact component, simplifying the interface by grouping options that users often need to manage together. This setup saves screen space and creates a more cohesive experience. The toggle group streamlines decision-making and keeps the interface clean and easy to navigate.

Usage

Code

Accessibility

Keyboard interactions

Keyboard interactions within a toggle group allow users to navigate options using arrow keys, facilitating efficient selection and ensuring accessibility for those who rely on keyboard navigation. Typically, users can navigate to a toggle group using the Tab key, once they're in the group they can focus the different options with Arrow keys. Then they can select or deselect an option with the Space or Enter key.

Key	Description
Tab	Shifts focus to the first toggle button in a toggle group. Or when a toggle button is focused the focus will go the the next focusable element in the page when the tab key is pressed.
Space/Enter	Selects/deselects the currently focused option. In non-multiple variant selecting one toggle button deselects another one, when there is already another one selected.
Arrow Keys	Once you are "in" a toggle group you can navigate to the next toggle button (option) by using the right or down arrow key. You can navigate back to the previous one with left or up. The focus indicator loops, so when you are at the last option and press "down" it will focus the first option.

WAI-ARIA

In the component itself we use multiple aria-attributes to assure the component works well with a range of assistive technologies. For some attributes however it is not possible for the Design System to add a meaningfull value, because it relies on the context or way a component is used.

Attributes that we recommend you add in certain scenarios are mentioned below.

Attribute	Value	Description
`aria-label`	string	The `aria-label` can be added on the toggle group to describe its purpose. Individual button labels, especially in case of icon only buttons, need to be set on button level. More information about accessibility of toggle buttons can be found in the toggle button documentation.
`aria-labelledby`	string	Can be used to connect with a single (heading) element that describes the toggle group, instead of using`aria-label`, which would duplicate the text.
`aria-disabled`	boolean	Announces the toggle group as disabled with a screen reader. See [Note 1] below for more explanation.

Notes:

The aria-disabled should not be used as a one-for-one replacement for the disabled attribute because they have different functionalities:
- disabled dims the toggle group visually, takes it out of the tab-focus sequence, prevents actions (click, enter) on it and announces it as 'dimmed' or 'disabled' in a screen reader.
- aria-disabled only does the latter. You will need to disable the functionality yourself. This might be useful for scenarios where you don't want to take the toggle group out of the navigation flow.
When disabled is added to a toggle group there is no need to also add aria-disabled; Everything aria-disabled does, disabled does as well.
You can read more on the difference and in which scenarios which option might be preferable on the MDN page about aria-disabled

Interactive example