Intro
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.
https://www.sap.com/design-system/live-examples/Switch/Switch_LE_Intro.html
Switches – live examples
When to Use
Do
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.
Anatomy
- 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.
https://www.sap.com/design-system/live-examples/Switch/Switch_LE_BehaviorAndInteraction.html
Switches behavior and interaction – live examples