Customers use switches to toggle between two states (like on and off), and the changes should take effect instantly. Depending on the interaction, a switch can be either a toggle or a checkbox.

Resources

Related Guidelines

Usage

Which one to use, a toggle or a checkbox? Here’s how we decide.

  • Use a switch for binary settings when changes are instantaneous upon state change.

  • Use a checkbox when users need to take extra steps before changes happen. If the user needs to make another selection, such as selecting Continue or Next to apply changes, use a checkbox.

  • Use checkboxes when users can select multiple items.

Appearance and behavior

 

Component breakdown

Accessibility pro tip

Accessibility

Switch toggle should always be used in conjunction with a label. It is difficult for color blind users to distinguish choices or access information based on colors alone.

 

See accessibility guidelines

  • Was this Helpful?
  •