Toggle button
Selection element that allows users to switch between states or views.
Creating access for everyone, everywhere requires attention to accessibility attributes, best practices, and requirements. Find accessibility guidance below.
Note: Components in each code library are implemented differently (especially Flutter). Many of the behaviors and attributes described are already handled for you as part of our components. Product teams are responsible for ensuring their apps meet all current requirements. Some of the information below may not apply to your implementation.
Best practices
Ensure the following best practices are met when implementing this component during development.
Toggle buttons are implemented in several ways in our library. Single-select toggles are implemented as radios or buttons while multi-select toggles are implemented as checkboxes or buttons. Best practices and keyboard behavior follow the type of control being used.
- Ensure toggle containers wrap for narrow screens and high zoom levels.
- Use the
attribute if you are using button components.
Keyboard controls
Single-select toggle buttons
| Key | Behavior |
|---|---|
| ↑ ↓ → ← | Moves the focus and selection to the next option in the group and unselects the previously focused one. Focus moves in a circular rotation within the group, so progressing past the last option returns focus to the first in the group. |
| Tab | Moves to the next focusable element outside the toggle button group. |
Multi-select toggle buttons
| Key | Behavior |
|---|---|
| Space | Selects/unselects the toggle button when the component is in focus. |
| Tab | Moves keyboard focus to the next checkbox in a group or next interactive element. |