Skip to content

Soracom

Design System
Home Design System Elements Switch

Switch

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>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<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>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<label class="ds-switch --left-label">
  <input type="checkbox">
  <div>Use privacy separator</div>
</label>

Options 

Basic usage 

Example using html <label> container
<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>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<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>
Example using html <div> container
<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>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<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 

Example using html <label> container
<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>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<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>
Example using html <div> container
<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>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<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 

Example using html <label> container
<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>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<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>
Example using html <div> container
<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>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<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 

Example using html <label> container
<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>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<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>
Example using html <div> container
<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>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<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>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<label class="ds-switch --small">
  <input type="checkbox">
  <div>Off</div>
  <div>On</div>
</label>

Experimental 

Three way toggle 

The example below uses 3 radio components
<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>
The example below uses 3 radio components
<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>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<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>
The example below uses 3 radio components
<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>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<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>