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
- Track: The track is the container for the handle. The track color also visualizes the state of the switch.
- Handle: The handle indicates whether the switch is toggled on or off. This is visualized by different icons within the handle.
Anatomy of a switch
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.