Switch

Use Switch for single-cell options that can be turned on and off only. If you have a cell with multiple options that can activated, consider using Checkbox.

also known as Toggle, Slide Toggle

Primary example of Switch component

Usage guidelines

When to use
  • For a binary option that can be either active or inactive (on or off).
When not to use

Best practices

Example of Switch with label and subtext
Do

Use a label and subtext to give Switch context when possible.

Example of Switch with truncated text
Don't

Truncate label text. Instead, allow it to wrap to form another line.

Example of disabled Switch
Do

Communicate why a switch is disabled and how to enable it if possible.

Example of incorrect switch usage
Don't

Use checkboxes or radio buttons to replace the functionality of a switch. If the functionality is a binary on or off, use Switch instead.

Accessibility

Switches should have Labels

, Opens a new tab
that can be read by screen readers, and that can be tapped to make it easier for users to select and deselect.
People use Apple and Android’s accessibility features, such as VoiceOver and TalkBack to personalize how they interact with their device. Supporting these personalizations ensures that everyone has a great user experience. See Apple and Android’s accessibility documentation for more information:

Accessible design on Android

, Opens a new tab

Accessible development on Android
, Opens a new tab

Design tokens

Anatomy

Variants

Disabled and active states

  1. Default | Inactive state
    Switch is “off” and is not disabled
  2. Default | Active state
    Switch is “on” and is not disabled
  3. Disabled | Inactive state
    Switch is “off” and is disabled
  4. Disabled | Active state
    Switch is “on” and is disabled
Example of default inactive state of Switch

Default | Inactive state

Example of default active state of Switch

Default | Active state

Example of disabled inactive state of Switch

Disabled | Inactive state

Example of disabled active state of Switch

Disabled | Active state

With label

  1. Label left
    Label sits to the left of the switch
  2. Label right
    Label sits to the right of the switch

Label left

Label right

With subtext

Subtext sits below the Switch label and aligns in the direction of the label.


Writing

Do
  • Be clear and brief with Switch labels so they can be easily understood.
  • When possible, use verbs to clarify the action. Something like “set…” or “show…”.
  • If possible, be clear whether the setting is activated or deactivated.
  • Use sentence case for labels.
Don't
  • Use vague language out of context, like “turn on” or “turn off” repeating the state of the switch is redundant and can clutter the interface.
  • Don’t use “you,” “your,” or “my” to describe an action. Instead of “turn on your notifications,” say “turn on notifications.”
Edit page on GitHub