Skip to main content

Switch Guidelines

Use Switches to provide a quick way to toggle between enabled and disabled states. Switches are ideal when the user wants to turn something on or off with an immediate effect.

The best way to check if the Switch component is appropriate is to imagine whether a physical switch would behave the same way.

If you're not sure whether you should use a Switch or a Checkbox, generally speaking it's safer to go with the Checkbox.

Structure​

  1. Label
  2. Knob
  3. Guide rail

Best Practices​

Switches should:

  • Never require users to press a submit button to apply the setting. In those cases, use a Checkbox instead.
  • Apply their effect immediately until intentional withdrawal. Switches should be self-submitting and revocable anytime, and their state should affect the behaviour of the application.
  • Be labeled with a positive statement, like "Activate [something]" or "Enable [something]". Don't use negative statements like "Disable [something]".
  • Act as an on/off switch. If the turned-off state is NOT the negation of the label, but an alternative option, use a Radio button-like interaction to describe both states.
  • Indicate that they are turned off with the knob positioned left and the background colored grey. Knob on the right and green background indicates the Switch is turned on.

Try to avoid:

  • Placing a Switch inside a form that needs to be saved with a Save or Apply button. This may confuse users about whether flipping the Switch had any effect.
  • Using Switches solely to show and hide parts of the UI. Consider using the Accordion component to hide optional UI.
  • Using a group of Switches for selecting items from a list. Use a group of Checkboxes or Radios instead.