Skip to content

Switch

Description

Also known as a toggle switch or a toggle.

The Switch component (toggle) is a digital on/off switch. Toggle switches are best used for changing the state of system functionalities and preferences. "Toggles may replace two radio buttons or a single checkbox to allow users to choose between two opposing states." - Source

May may also check out the Checkbox component.

How it should work

"Toggle switches should take immediate effect and should not require the user to click Save or Submit to apply the new state. As always, we should strive to match the system to the real world." - Source

When not to use it

Don't use it if the user is required to click save or update to apply the new state.

Good practices

"The toggle labels should describe what the control will do when the switch is on; they should not be neutral or ambiguous. When in doubt, say the label aloud and append “on/off” to the end. If it doesn’t make sense, then rewrite the label" - Source

The label should describe what the toggle will do when the switch is on.

Demos

Unchecked Switch (default state)

Checked Switch

Error message

Checked Switch with error message

Disabled Switch in checked state