Toggle
A toggle is a digital on/off switch. These are best used for changing the state of system functionalities and preferences. They may replace two radio buttons or a single checkbox to allow users to choose between two opposing states.
Overview
Keyboard interaction
Each toggle is in the tab order. Pressing Enter or Space changes the toggle’s state between off and on.
Redundant state information
By default, use both color and text to indicate if the toggle is on or off. Where space constraints make a smaller toggle desirable, add a tickmark to the toggle’s “on” state so that if the text is not included, the component’s on/off state can be distinguished without relying on use of color. The state is also captured programmatically for users who cannot see or understand the visual indicators.
Design recommendations
Do not change the toggle’s label based on its state
It is essential that designers distinguish between the text indicating the on/off state of the toggle and the text that is the toggle’s label. The label’s text should not change based on the on/off state.