Switch ​

Overview

A switch allow users to enter data by making a selection between two distinct and opposite states, such as “On” and “Off”.

Usage guidelines ​

When to use ​

Switches can be used in forms, in filter menus, or as standalone elements (e.g. switch from dark to light mode on a interface). In general:

  • Use switch when the selection has to be made between two distinct and opposite states, such as “On” and “Off”.

Writing guidelines ​

  • Labels:

    • Switch typically include a label. Although the length of the label can vary according to the context, always keep it concise and direct.

  • Capitalization and case: Write labels in sentence case and without punctuation.

  • Text overflow: In case of overflow, text wraps to another line.

Top align input and label
Don't center align input and label

Specifications ​

Anatomy ​

Anatomy
  • Switch input: Indicates wether an option is activated or not and its state.
  • Switch label: Describes the option to activate or deactivate.

Size ​

Switches come in one size.

Styling ​

Switch is available for both dark and light theme.

Two styling variants are available: “Shape” and “Outlined”. Take into account factors such as contrast with the background and balance with other elements of the UI when choosing the variant to use.

Styling for this component also depends on whether items are selected or unselected.

Switch styling

Behavior ​

Alignment ​

Switches are always aligned to the left of the label.

Always place labels to the right of the inputs.
Do not reverse the order.

Interaction ​

Apart from being selected, unselected or indeterminate, switches come in five possible states: inactive hover, focused, disabled and error.

Switch shape states
Switch outlined states

Switches always have a default value. The effect of the selection does not require further confirmation from the user and it is immediately applied.

To select or deselect an option, simply press on the input or label.

Default
Hover
Press
Selected

Accessibility guidelines ​

Design considerations ​

Make sure there is enough contrast between selection controls color and the background.

For a more accessible experience:

  • Keep labels concise and direct.
  • Consider adding group titles and helper text to provide additional information. - Keep in mind that if you decide to not show the label, one is always needed in code anyway.
  • List option in a logical way.