Skip to content

Soracom

Design System
Home Design System Elements Switch

Switch

Overview 

Always
  1. Make sure switches take effect immediately and do not require clicking a Save button
Never
  1. 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).
Example using html <label> container
<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>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<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.

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>

Multiple switch 

Multiple switch components use a slightly different structure and html radio inputs.

Always
  1. Make sure one input has a default checked state
<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>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<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
  1. 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>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<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>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<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>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<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>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<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>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<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>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<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>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<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>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<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>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<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>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<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>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<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>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<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>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<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 

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>

Div structure with Left and Right labels 

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>

Div structure with left-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>