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 GuidelinesAnatomy
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.
Character count limit: 30
Refer to the label instructions for Checkboxes for more best practices.
Types
States
Behaviors
Here are some best practices we recommend for using a switch:
Use a switch when the user is selecting a single mode or state that is either ON/OFF or TRUE/FALSE (i.e. there are only two possible states).
Do not use as a substitute for radios or checkboxes; Switches only have one label, which should be the name of the state itself. Radios and checkboxes have individual labels.
Do not use as a substitute for radios or checkboxes; Switches only have one label, which should be the name of the state itself. Radios and checkboxes have individual labels.
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
