Switch

Usage

Use switches to:

• Toggle a single item on or off

• Immediately activate or deactivate something

• Adjust settings

Each switch works independently of other switches in the list. To use a switch, the user clicks the switch to toggle it between active and inactive. The switch text label describes the action.

If there is only one switch, either a label or text can be used, depending on the form’s format.

If there are multiple switches, the label describes the whole group and the text property of the switch describes each individual switch.

Within a group, each switch can be activated or deactivated. The changes take effect after user confirmation via a triggering action button. (such as "Save")

Placement

Switches are often used in forms. Forms can be placed on a full page, in a modal or in a side panel.

Anatomy and content

The switch component is composed of a switch label and a switch input. In case of a switch group, a group label can be added.

Switch input Use the switch input to toggle the state of the item to active or inactive. By default, it is inactive.

Switch label

Use the switch label to describe the information you want to make active or inactive:

Always use clear and concise labels for switches

Labels appear to the right or left of switch inputs

Content

Avoid creating a switch that includes the text "on" and "off" within the graphic itself. The switch alone should be sufficient.

Use adjectives rather than verbs to describe labels and the state of the object affected..

Alignment

Switch labels are positioned to the left or the right of their inputs, depending on the situation.

Switch groups can be laid out vertically or horizontally, depending on the use case and the structure of the UI.

Group label (optional)

Use a group label to describe the set of options or provide guidance for making a selection.

Behavior and interaction

A switch is successfully toggled when the switch thumb slides to the other side of the track upon user interaction.

Switches can be active or inactive.

States

Switches are either active or inactive and can have one of the following states: enabled, disabled, hovered, focused, pressed or read-only states.

Disabled state : to enhance user understanding, display the « not allowed » cursor and add a tooltip to explain the reason why a field is disabled.

Responsiveness

We recommend switch labels being fewer than three words.

If you are tight on space, consider rewording the label. Do not truncate switch label text with an ellipsis.

Long labels may wrap to a second line, and this is preferable to truncation.

Text should wrap beneath the switch so the control and label are top aligned.