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.

Docs image
Top align input and label
Docs image
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.

Docs image
Switch styling

Behavior ​

Alignment ​

Switches are always aligned to the left of the label.

Docs image
Always place labels to the right of the inputs.
Docs image
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.

Docs image
Switch shape states
Docs image
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.

Docs image
Default
Docs image
Hover
Docs image
Press
Docs image
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.