💠 Switch

A control that allows the user to toggle between checked and not checked.

Usage

The Switch component is a control that offers a binary choice, such as on/off or yes/no. It's a visual toggle between two mutually exclusive states and is a common control in user interfaces for settings.

Unlike checkboxes, which can be used for multiple selections, a Switch represents a one-or-the-other option and is typically used to activate or deactivate a specific feature or setting.

When to use

• Immediate action settings: Use a Switch when the user's action should have an immediate effect, without the need for a "Submit" button. For example, toggling dark mode on or off.
• Binary options: Employ a Switch for settings that can only be either enabled or disabled, where no intermediate states are possible.
• Space-saving: A Switch is a good choice when space is at a premium, and you want to avoid cluttering the interface with larger controls like sliders or buttons.
• Preference settings: They are ideal for preference settings that a user might want to toggle frequently, such as turning Wi-Fi or Bluetooth on a mobile device on and off.

Avoid using a Switch when the action requires further confirmation or has significant consequences that the user might not fully understand from the toggle alone. Do not use a Switch for actions that require more granular control or for settings that need to be saved before taking effect.

Examples

Default

With label

Disabled

With form

Useful links

Here you go! Here are all the resources you might need if you are a designer, a developer or a content manager:

Accessibility

Adheres to the switch role requirements (opens in a new tab).

Keyboard interactions