
Introduction
A toggle switch gives users the ability to switch the state of a setting between two contrasting options, e.g. on and off. It allows for a convenient and straightforward way to change the state or activation of a particular feature or setting.
- Switches are used to represent the option of switching between two states or an on-off state.
- Switches instantly toggle between two mutually-exclusive states.
Usage
Use a concise label description for the setting, ideally consisting of less than 5 words. Attempt to include all essential information within the label itself, while additional clarifying text can be added after the label if necessary. Recognise that actions taken on a switch may impact other content within the user experience, so maintaining parallel language and clarity across labels is crucial.

Do provide an immediate response when toggling a switch.

Don't require the user to press a button to apply changes.

Use few words for labels and keep to a single line of text. Consider whether a verb is needed, e.g. “Weekly newsletter” instead of “Turn on weekly updates”.

Keep your labels as short as possible. Avoid using phrases related to a state of the switch, e.g. “Turn on/off setting”. If the switch needs more explanation, use a tooltip.
Also known as
Toggle, Lightswitch, Toggle Button