COMPONENTS

Switch

Switch toggles a single option on or off.

switch-intro.png

Switches can perform an action immediately and without confirmation. Switches may be grouped for multiple options.

switch-anatomy.png
  1. Switch toggle
  2. Label

Switches can be placed either in-context near the content it is controlling or in a vertical group. Vertical groups are typically placed in a separate settings or account section.

switch-examples.png

Switches can have their label placed to the left or the right of the switch toggle. Additionally when grouped as a list, switch labels can be aligned to the left or right of the list container with the switch toggle aligned to the opposite side.

switch-label-placement.png

Switches have four possible states – selected, unselected, disabled or error.

switch-states.png

Switches can be toggled by selecting either the label or the switch toggle.

switch-tap-area.gif

Switches can be displayed in large, medium or small sizes.

switch-sizes.png
  • Switches must be set to be either selected (on) or unselected (off).
  • Switches must always have labels or surrounding context.
  • Write labels in sentence case with no punctuation and keep them to six words or fewer.
  • If a label is more than six words, consider adding the necessary context as a sentence to an outer container and shortening the switch label.
  • For a set of options requiring a single selection that is not a on or off setting, instead use Radio.
  • Use switches when an immediate response is required without additional user action, such as selecting "Save" or "Apply".
  • For a set of options that allows multiple selections and requires the user to perform additional steps for changes to become effective, instead use Checkbox.

Do keep the same label regardless of whether the switch is on or off.

switch-label-do.png

Don't change the label when the switch is toggled between selected and unselected.

switch-label-dont.png