- Home
- Design system
- Elements
- Switch
Switch
Overview
- Make sure switches take effect immediately and do not require clicking a Save button
- Never use a switch if the user needs to click a Save button to save the change – use a ds-radio or ds-checkbox instead
Options
Basic usage
Toggle switch
The preferred structure is to use a label element as the container for a switch.
A toggle switch should only be used to enable or disable a specific option (eg. Enable feature X), it should not be used to choose between two options (eg. Enable feature X OR Enable feature Y).
Alternatively, you can use a div element as the container for a switch, but if possible use the label structure above.
Multiple switch
Multiple switch components use a slightly different structure and html radio inputs.
checked state Hide label
The switch text can be hidden using --hide-label
When using using --hide-label on a multiple switch, always use icons to indicate what the options do.
Tip Position
By adding the appropriate --tip-* class, the position of the tip can be changed.
The following positions are available - (hover over labels to view examples):
--tip-top-left | --tip-top | --tip-top-right | ||
--tip-left-top | --tip-right-top | |||
--tip-left | default (top) | --tip-right | ||
--tip-left-bottom | --tip-right-bottom | |||
--tip-bottom-left | --tip-bottom | --tip-bottom-right |
Size
Small
Icons
Toggle switch icons
Add an icon class to the container ds-switch element to set an icon for both on/off states
Add an icon class to the input element to set an icon for just the on state
Add an icon class to the container ds-switch element and to the input to set different icons for on/off states
Multiple switch icons
Add an icon class to the container ds-switch element to set an icon for all switches in both on/off states
Add an icon class to the label element to set an icon for a switch in both on/off states
Add an icon class to the input element to set an icon for just the on state
Add an icon class to the label element and to the input to set different icons for on/off states
Add an icon class to the container ds-switch, label and input elements to a default icon and different icons for on/off states
Left and Right labels
If the switch contains more than one div element, the first will be displayed before the switch.
Left label
If the switch contains only one div element, you can force the label to the left by using the --left-label class
Styles
Theme style
Theme style has slightly different default coloring used to indicate dark/light mode