Skip to main content
Version: Canary 🚧

Change log

Components

Switch

Overview

When to use

  • Use a switch when your intent is to turn something on or off instantly.

When not to use

  • Switches should never require users to click a button to apply or save the setting.
  • When the two states are not opposites or where the alternate setting is not intuitively obvious.

Variants​

Switch has two alignment variants. If you are creating a group of switches or have multiple groups close to each other on a page then stick to one variant for all switches.

Left aligned​

Switch left, label right. Recommended for short labels (5 words or less).

Right aligned​

Label left, switch right. Recommended for longer labels (more than 5 words) or in case there are multiple switches with short and long labels in a group.

This variant should always stretch to the content area width.

Labels and hints​

Make sure that the label is clear and concise. A good label describes the effect that will happen when the switch is set to “On” position. For example, use the label “Allow notifications” instead of “Do you want to receive notifications?”.

Hint text can be used to give more context to the label. Try to keep the hints as short and concise as possible.

Grouping​

When creating groups of switches, use only one variant in a group.

When using right aligned switches, it is recommended to have divider lines between them to help users to make a connection between the label and the switch.

Nesting​

In a nested group, one master switch enables or disables a group of related switches. Use right aligned switches for nested groups.

Sub switches are displayed in a disabled state when the master switch is off.

This example uses JavaScript. Source code can be found here.