Switch

Use a switch to enable or disable functionality that takes effect instantly.

Overview

Switches should control settings or content immediately. The label guidelines will make it clear to a user what action they are taking.

Immediate effect

Changes made with a switch take effect immediately without requiring a save or submit action. This distinguishes switches from checkboxes in forms.

Proximity to controlled content

When switches activate or control content, they should be placed in close proximity to the content they change, so users can see the action being taken.

Example of a label next to a switch

Label and switch example

Example: A switch labelled "Show calculations" should appear near the calculations it reveals.

No error state

Unlike other form elements, switches do not have an error state. If a switch setting could cause an error, consider using a different pattern or provide feedback through other means (e.g., a warning message when the switch is activated).