Switch

We use switches to allow users to choose between two mutually exclusive choices in the same line. This is often associated with enabling vs. disabling.
Demo and Developer GuidelinesFigma Component

Anatomy

Display your component, and add number markups provided below. If your component has multiple types, only show one. Use this paragraph above to describe what elements the user can and cannot change in the component.

Label

Switch labels are sentence case without punctuation unless it’s a proper noun or a user-inputted label.

Character count limit: 30

Refer to the label instructions for Checkboxes for more best practices.

Types

States

Behaviors

When a user interacts with a switch, changes are saved right away. Therefore, you should avoid using a switch on pages where the user has to click save or update for the change to take effect.
Correct
Incorrect
If you need to use a switch on a page with a save button, apply the change right away, and use a success toast to indicate the setting is in effect. Additionally, disable the save button if no changes have been made.
If enabling the switch reveals additional form fields underneath, ensure that any required fields have default values. They cannot be left empty to cause an error.

Specifications

Padding

Styling