Overview
Toggle switches should take effect immediately and not require clicking Save or Submit to apply the new state. If the user needs to click Save or Submit to save the new state, a ds-radio or ds-checkbox should always be used instead.
Recommendations
On/Off toggles
When using a ds-toggle to display an on/off state, it’s recommended to use the following format:
<label class="ds-switch">
<input type="checkbox">
<div>Off</div>
<div>On</div>
</label>Labelled toggles
When using a ds-toggle to enable/disable a labelled feature, it’s recommended to use the following format:
<label class="ds-switch --left-label">
<input type="checkbox">
<div>Use privacy separator</div>
</label>Options
Basic usage
<label class="ds-switch">
<input type="checkbox">
<div>Switch text</div>
</label>
<label class="ds-switch">
<input type="checkbox" disabled>
<div>Switch text</div>
</label><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>Hide label
<label class="ds-switch --hide-label">
<input type="checkbox">
<div>Switch text</div>
</label>
<label class="ds-switch --hide-label">
<input type="checkbox" disabled>
<div>Switch text</div>
</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>Left and Right labels
<label class="ds-switch">
<input type="checkbox">
<div>Before</div>
<div>After</div>
</label>
<label class="ds-switch">
<input type="checkbox" disabled>
<div>Before</div>
<div>After</div>
</label><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>Left label
<label class="ds-switch --left-label">
<input type="checkbox">
<div>Switch text</div>
</label>
<label class="ds-switch --left-label">
<input type="checkbox" disabled>
<div>Switch text</div>
</label><div class="ds-switch --left-label">
<input type="checkbox" id="test5">
<label for="test5">Switch text</label>
</div>
<div class="ds-switch --left-label">
<input type="checkbox" id="test6" disabled>
<label for="test6">Switch text</label>
</div>Size
<label class="ds-switch --small">
<input type="checkbox">
<div>Off</div>
<div>On</div>
</label>Experimental
Three way toggle
<div class="ds-slideswitch --theme">
<input type="radio" name="ds-theme" id="ds-theme-1" value="light">
<label for="ds-theme-1">
<span>Light</span>
</label>
<input type="radio" name="ds-theme" id="ds-theme-2" value="system">
<label for="ds-theme-2">
<span>System</span>
</label>
<input type="radio" name="ds-theme" id="ds-theme-3" value="dark">
<label for="ds-theme-3">
<span>Dark</span>
</label>
</div><div class="ds-slideswitch --theme --hide-label --bottom">
<input type="radio" name="ds-theme" id="ds-theme-1" value="light">
<label for="ds-theme-1">
<span>Light</span>
</label>
<input type="radio" name="ds-theme" id="ds-theme-2" value="system" checked>
<label for="ds-theme-2">
<span>System</span>
</label>
<input type="radio" name="ds-theme" id="ds-theme-3" value="dark">
<label for="ds-theme-3">
<span>Dark</span>
</label>
</div><div class="ds-slideswitch --theme --hide-label --bottom --small">
<input type="radio" name="ds-theme" id="ds-theme-1" value="light">
<label for="ds-theme-1">
<span>Light</span>
</label>
<input type="radio" name="ds-theme" id="ds-theme-2" value="system" checked>
<label for="ds-theme-2">
<span>System</span>
</label>
<input type="radio" name="ds-theme" id="ds-theme-3" value="dark">
<label for="ds-theme-3">
<span>Dark</span>
</label>
</div>