#Overview
Toggle switches allow users to quickly switch between two possible states: on or off.
They can be thought of as a checkbox with a submit button, all-in-one, so their selection takes effect immediately.
#When to use
- To toggle a single item on or off with immediate effect
- For multiple items in a list that can be individually controlled, such as user settings
#Don’t use for
- To toggle between opposing options (use a Segmented Button)
- If options require a button to apply the setting, such as submitting a form (use a Checkbox)
#Anatomy
- Handle
- Track
- Label
#Spacing
The label’s font size differs between desktop (14px) and mobile (16px).
#Best practices
#No waiting time
Do
The effects of a switch should start immediately, without needing to save.
Don't
Do not use a spinner inside a switch.
#A switch controls binary options, not opposing
Do
Use a segmented button to choose between opposing options, such as the Grid and List views on a Product Type page (PT).
Don't
A switch does not control opposing options.
#Use descriptive labels
Do
The function of a switch should be described in detail.
Do
When required, additional information can be placed in a popover (i) next to the switch.
#Placement
#Customer account
#Customer notifications
#States
#Galaxus
#Digitec
- Off: Normal
- Off: Focus-visible
- Off: Disabled
- Activated: Normal
- Activated: Focus-visible
- Activated: Disabled
#Behavior
Upon clicking the switch, it is successfully toggled when the handle slides to the opposite side. The corresponding action takes effect immediately.