Switch Guidelines

Use Switches to provide a quick way to “switch” 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 just 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 of the Switch. In those cases use a Checkbox instead.
• Apply their effect immediately until intentional withdrawal. Switches should be self-submitting and revocable anytime but until then, their state should affect the behaviour of the application.
• Be labeled with a positive statement, like "Activate [something]", "Enable [something]". Don’t use negative statements for Switch labels, like "Disable [something]".
• Act as a on-off switch. If the turned-off state of the Switch is NOT the negation of the statement in the label, but an alternative option, then a Radio button-like interaction should be used to describe both states.
• Indicate that they are turned off with the knob positioned left and the background colored gray. Knob on the right and green background indicate that the Switch is turned on.

Try to avoid:

• Placing a Switch inside a form that needs to be saved using a Save or Apply button. This may confuse the users whether flipping the Switch had any effect.
• Using Switches solely to show and hide parts of the UI (unless the Switch also turns something on, that has additional UI), e.g. don't use a Switch for something like "Show advanced settings". Consider using the Accordion component to hide optional UI.
  • In forms, Checkboxes and Radios can also show and hide UI depending on the context, e.g. when a selected Checkbox or Radio comes with additional options.
• Using a group of Switches for selecting items from a list. Use a group of Checkboxes or Radios instead.