Switch Preview
A switch lets someone choose between two mutually exclusive options, like on or off. Activating a switch triggers an immediate change.
If you need a component that requires a submission step before applying a change, or if you need to specify an indeterminate state, try a checkbox.
Resources
Layout
Use switches with labels in most cases. Labels can appear on top of or on either side of the switch. If you use a switch without a label, it must appear in a context that’s obvious. For example, in a data grid where the switch is represented by the column header.
Keep switch labels close enough for intuitive associations
Accessibility
If using a switch with an icon, use a hidden text label to identify the switch’s purpose to screen readers.
Content
Labels
Use a noun or short noun phrase for the label that describes the switch setting. Using only nouns in addition to the visual and programmed cues is often enough to infer state.
If nouns are awkard or ambiguious, add verbs to help clarity. Verbs should always describe the positive state of the setting. Don’t use “Turn on” or “Turn off” in switch labels. Instead, use specific verbs that describe what it means for the setting to be enabled.
Use specific verbs in switch labels if it helps clarity
Ambiguous nouns and state indications in labels can cause extra confusion
Use sentence case with no end punctuation in switch labels. Never make a switch label a question.
Questions as switch labels can increase cognitive load
Including more info
If you need to include an additional indication of a switch’s state, use a tooltip.
If you need to include more information about the setting a switch triggers, try a switch field with an info button or helper text.
If it makes sense to guide people away from the interaction to give them more information, try a link to learn more about the topic. However, use caution when taking people away from their original context.
