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.

Layout

Generally, switches should be used with a label, which can appear either on top of, or on either side of the control. If a switch is used without a label, it must appear in a context that is obvious, like in a table where the switch would be associated with 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

Use one to three key words that describe the setting the switch triggers. Avoid using words that indicate state, like “on” and “off.” Usually, using only nouns in addition to the visual and programmed cues makes it easy to infer state.

Add verbs if nouns are awkward and if it will help clarity.

Use sentence case with no end punctuation.