Components

Switch

Switches allow users to enable or disable a setting immediately.

Usage

Switches allow the user to enable or disable an option. Typically the expectation is that enabling or disabling the switch will immediately change the associated setting.

For a list of options where only one may be enabled at one time, use a radio group. For form setting with multiple options and where a confirming action is expected, consider using checkboxes.

Label text

Provide a label text to clearly indicate what option the associated switch enables or disables. Avoid too long label texts, the content should not exceed one line. Use the description field if extra clarification is required.

Provide a clear concise label for each switch

Don’t be unclear or unnecessarily wordy in describing what the setting means.

Formatting

Anatomy

The switch features a label, along with an optional description text.

A. Switch
B. Label
C. Description

Behavior

States

The switch can be either selected or unselected.

1. Selected
2. Unselected

Modify

Alignment

The switch can be aligned to the left or the right within a design, according to needs.

Left- and right aligned switches.

Description field

If further explanation is required in order to communicate what the associated option means, further clarification can be added in the description text.

A switch with label and description text.