Switch

Control that allows users to turn on or off item

Anatomy

A switch toggles the state of a setting (between on and off). Switches and checkboxes can often be used interchangeably, but the switch provides a more explicit, visible representation on a setting.

Track : the track is an element used to guide the Thumb between alternating states.
Thumb : the Thumb is a circular element on the switch that the user interacts with to turn something on or off.

Usage

Switch are very flexible components that can be placed anywhere you need to provide a user with an on and off option if used correctly.

Common places switch appear: Forms, settings pages, Modals etc

When to use

To enable users to change a single setting.
When the result of turning the setting on and off is clear.
For changes that have an instant response.

When not to use

To present multiple options.
For settings that require additional help or error handling.
For changes that require an additional confirmation.

Accessibility

All switch types display their state (on or off) through different methods and locations. It should be visible at a glance if a switch has been selected, and selected items should be more visually prominent than unselected items.

Always maintain a minimum 20 pixel margin between Switch or components so that they do not become lost.

Do : On & off item option

Use Switches to provide multiple on and off options for a set of items

Don't : Multiple item option

Use Radios to provide on and off functionality for a set of items

Content

When creating switch :

Use a basic switch by default unless space is limited, then use a switch without a label.
Add a form label in front of your switch to specify what setting a switch turns on or off, such as Wi-fi or Bluetooth.
If you’re using a basic switch, add switch labels to clarify between toggled settings, such as On and Off.
Don’t include the state of a switch in a label if you’re using a switch with a label and a checkmark.
Don’t use a switch if the options you’re presenting to the user are anything other than “on” / “off.” Instead, use radio buttons.

Do : Spesific context

Use a switch for situations where you are turning a series of one or more independent options on or off

Don't : Long context item

Use checkbox for situation where you can turning a series of one or more independent options on or off