The switch mimics a physical switch. It allows users to toggle individual features on or off.

Switches are mainly used for settings, personalization, and other use cases where the impact of the switch is directly recognizable.

Switches – live examples

When to Use

Use the switch:

• To set something as active or inactive (such as a dialog).
• To clearly show the mode or state of a setting.
• If the change takes immediate effect.

Don’t use the switch:

• If additional steps are required for changes to take effect (for example, if the setting requires confirmation or a Submit button). Use a checkbox instead.
• If it’s not clear whether the component is showing a state or an action. Use a checkbox instead.

Anatomy

1. Track: The track is the container for the handle. The track color also visualizes the state of the switch.
2. Handle: The handle indicates whether the switch is toggled on or off. This is visualized by different icons within the handle.

Behavior and Interaction

Clicking the switch toggles the state of the switch between active and inactive. If the switch is active, the described state is applied.

Clicking a switch sets the focus to the switch component. This is indicated visually by a solid line that surrounds the entire component.

Switches behaviour and interaction – live examples

Related Links