ToggleButton is a two-state button that the user can turn on or off. The corresponding action takes effect immediately. With ToggleButtonGroup, users can make a mutually exclusive selection from a set of related commands—with only one option selected at a time.
Note: This tab list includes overflow; tab positions may be inaccurate or change when a tab is selected Examples
Accessibility
On focus, the screen reader should:
Identify the toggle button.
Read out the text.
Expresses the state.
Read the position of the option within the total number of buttons available.
Key Function Tab
Tab moves focus into the toggle button group. Focus is set to the active button.
If focus is inside the toggle button group, Tab moves focus out of the toggle button group. Focus is set to the next component in the tab order.
Space / Enter
When focus is on the toggle button and the button is inactive, this action activates the button.
If focus is on an active button, this actions keeps the button active.
Shift + Tab
If focus is inside the toggle button group, this action moves focus out of the component. Focus is set to the previous component in the tab order.
If focus is below the toggle button group, this action move focus into the toggle button group. Focus is set to the active button.
Right arrow / Down arrow
This action moves focus to the next toggle button in the toggle button group.
If focus is on the last toggle button, this action wraps focus to the first toggle button.
Left arrow / Up arrow
This action moves focus to the previous toggle button in the toggle button group.
If focus is on the first toggle button, this action wraps focus to the last toggle button.
On focus, the screen reader should:
Identify the toggle button.
Read out the text.
Expresses the state.
Read the position of the option within the total number of buttons available.
Key Function Tab
Tab moves focus into the toggle button group. Focus is set to the active button.
If focus is inside the toggle button group, Tab moves focus out of the toggle button group. Focus is set to the next component in the tab order.
Space / Enter
When focus is on the toggle button and the button is inactive, this action activates the button.
If focus is on an active button, this actions keeps the button active.
Shift + Tab
If focus is inside the toggle button group, this action moves focus out of the component. Focus is set to the previous component in the tab order.
If focus is below the toggle button group, this action move focus into the toggle button group. Focus is set to the active button.
Right arrow / Down arrow
This action moves focus to the next toggle button in the toggle button group.
If focus is on the last toggle button, this action wraps focus to the first toggle button.
Left arrow / Up arrow
This action moves focus to the previous toggle button in the toggle button group.
If focus is on the first toggle button, this action wraps focus to the last toggle button.
On focus, the screen reader should:
Identify the toggle button.
Read out the text.
Expresses the state.
Read the position of the option within the total number of buttons available.
Key Function Tab
Tab moves focus into the toggle button group. Focus is set to the active button.
If focus is inside the toggle button group, Tab moves focus out of the toggle button group. Focus is set to the next component in the tab order.
Space / Enter
When focus is on the toggle button and the button is inactive, this action activates the button.
If focus is on an active button, this actions keeps the button active.
Shift + Tab
If focus is inside the toggle button group, this action moves focus out of the component. Focus is set to the previous component in the tab order.
If focus is below the toggle button group, this action move focus into the toggle button group. Focus is set to the active button.
Right arrow / Down arrow
This action moves focus to the next toggle button in the toggle button group.
If focus is on the last toggle button, this action wraps focus to the first toggle button.
Left arrow / Up arrow
This action moves focus to the previous toggle button in the toggle button group.
If focus is on the first toggle button, this action wraps focus to the last toggle button.
