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.
<label class="ds-switch">
<input type="checkbox">
<span>Switch text</span>
</label>
<label class="ds-switch">
<input type="checkbox" disabled>
<span>Switch text</span>
</label>Alternatively, you can use a div element as the container for a switch, but if possible use the label structure above.
<div class="ds-switch">
<input type="checkbox" id="test1">
<label for="test1">Switch text</label>
</div>
<div class="ds-switch">
<input type="checkbox" id="test2" disabled>
<label for="test2">Switch text</label>
</div>Multiple switch
Multiple switch components use a slightly different structure and html radio inputs.
- Make sure one input has a default
checkedstate
<div class="ds-switch">
<label>
<input type="radio" name="ds-theme" value="a" checked>
<span>Option A</span>
</label>
<label>
<input type="radio" name="ds-theme" value="b">
<span>Option B</span>
</label>
<label>
<input type="radio" name="ds-theme" value="c">
<span>Option C</span>
</label>
</div>Hide label
The switch text can be hidden using --hide-label
- Always include a text description in the switch
<label class="ds-switch --hide-label">
<input type="checkbox">
<span>Switch text</span>
</label>When using using --hide-label on a multiple switch, always use icons to indicate what the options do.
<div class="ds-switch --hide-label">
<label class="--icon-lightning">
<input type="radio" name="ds-theme" value="a" checked>
<span>Option A</span>
</label>
<label class="--icon-sun">
<input type="radio" name="ds-theme" value="b">
<span>Option B</span>
</label>
<label class="--icon-cloud">
<input type="radio" name="ds-theme" value="c">
<span>Option C</span>
</label>
</div>Tooltip position can be controlled using the same position classes of texttip
<label class="ds-switch --hide-label --bottom">
<input type="checkbox">
<span>Switch text</span>
</label>Size
Small
<label class="ds-switch --small">
<input type="checkbox">
<span>Switch text</span>
</label><div class="ds-switch --small">
<label>
<input type="radio" name="ds-theme" value="a" checked>
<span>Option A</span>
</label>
<label>
<input type="radio" name="ds-theme" value="b">
<span>Option B</span>
</label>
<label>
<input type="radio" name="ds-theme" value="c">
<span>Option C</span>
</label>
</div>Icons
Toggle switch icons
Add an icon class to the container ds-switch element to set an icon for both on/off states
<label class="ds-switch --icon-lightning">
<input type="checkbox">
<span>Switch text</span>
</label>Add an icon class to the input element to set an icon for just the on state
<label class="ds-switch">
<input type="checkbox" class="--icon-lightning">
<span>Switch text</span>
</label>Add an icon class to the container ds-switch element and to the input to set different icons for on/off states
<label class="ds-switch --icon-cloud">
<input type="checkbox" class="--icon-lightning">
<span>Switch text</span>
</label>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
<div class="ds-switch --icon-lightning">
<label>
<input type="radio" name="ds-theme" value="a" checked>
<span>Option A</span>
</label>
<label>
<input type="radio" name="ds-theme" value="b">
<span>Option B</span>
</label>
<label>
<input type="radio" name="ds-theme" value="c">
<span>Option C</span>
</label>
</div>Add an icon class to the label element to set an icon for a switch in both on/off states
<div class="ds-switch">
<label class="--icon-lightning">
<input type="radio" name="ds-theme" value="a" checked>
<span>Option A</span>
</label>
<label class="--icon-sun">
<input type="radio" name="ds-theme" value="b">
<span>Option B</span>
</label>
<label class="--icon-cloud">
<input type="radio" name="ds-theme" value="c">
<span>Option C</span>
</label>
</div>Add an icon class to the input element to set an icon for just the on state
<div class="ds-switch">
<label>
<input type="radio" name="ds-theme" value="a" class="--icon-lightning" checked>
<span>Option A</span>
</label>
<label>
<input type="radio" name="ds-theme" value="b" class="--icon-sun">
<span>Option B</span>
</label>
<label>
<input type="radio" name="ds-theme" value="c" class="--icon-cloud">
<span>Option C</span>
</label>
</div>Add an icon class to the label element and to the input to set different icons for on/off states
<div class="ds-switch">
<label class="--icon-lightning">
<input type="radio" name="ds-theme" value="a" class="--icon-confirm" checked>
<span>Option A</span>
</label>
<label class="--icon-sun">
<input type="radio" name="ds-theme" value="b" class="--icon-confirm">
<span>Option B</span>
</label>
<label class="--icon-cloud">
<input type="radio" name="ds-theme" value="c" class="--icon-confirm">
<span>Option C</span>
</label>
</div>Add an icon class to the container ds-switch, label and input elements to a default icon and different icons for on/off states
<div class="ds-switch --icon-sun">
<label class="--icon-cloud">
<input type="radio" name="ds-theme" value="a" class="--icon-confirm" checked>
<span>Option A</span>
</label>
<label class="--icon-lightning">
<input type="radio" name="ds-theme" value="b">
<span>Option B</span>
</label>
<label>
<input type="radio" name="ds-theme" value="c" class="--icon-confirm">
<span>Option C</span>
</label>
<label>
<input type="radio" name="ds-theme" value="d">
<span>Option D</span>
</label>
</div>Left and Right labels
If the switch contains more than one div element, the first will be displayed before the switch.
<label class="ds-switch">
<input type="checkbox">
<span>Before</span>
<span>After</span>
</label>
<label class="ds-switch">
<input type="checkbox" disabled>
<span>Before</span>
<span>After</span>
</label>Left label
If the switch contains only one div element, you can force the label to the left by using the --left-label class
<label class="ds-switch --left-label">
<input type="checkbox">
<span>Switch text</span>
</label>
<label class="ds-switch --left-label">
<input type="checkbox" disabled>
<span>Switch text</span>
</label>Styles
Theme style
Theme style has slightly different default coloring used to indicate dark/light mode
<div class="ds-switch --theme --hide-label --bottom">
<label class="--icon-light-mode">
<input type="radio" name="ds-theme" value="light">
<span>Light</span>
</label>
<label class="--icon-contrast">
<input type="radio" name="ds-theme" value="system" checked>
<span>System</span>
</label>
<label class="--icon-dark-mode">
<input type="radio" name="ds-theme" value="dark">
<span>Dark</span>
</label>
</div>Tests
Div structure with hide-label
<div class="ds-switch --hide-label">
<input type="checkbox" id="test3">
<label for="test3">Switch text</label>
</div>
<div class="ds-switch --hide-label">
<input type="checkbox" id="test4" disabled>
<label for="test4">Switch text</label>
</div>Div structure with Left and Right labels
<div class="ds-switch">
<input type="checkbox" id="test7">
<label for="test7">Before</label>
<label for="test7">After</label>
</div>
<div class="ds-switch">
<input type="checkbox" id="test8" disabled>
<label for="test8">Before</label>
<label for="test8">After</label>
</div>