Soracom

Design System
  1. Home
  2. Design system
  3. Elements
  4. Switch

Switch

Overview

  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.

Never

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

html
Copy 
<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

html
Copy 
<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.

1. Make sure one input has a default checked state
html
Copy 
<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

1. Always include a text description in the switch
html
Copy 
<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.

html
Copy 
<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

html
Copy 
<label class="ds-switch --hide-label --bottom">
  <input type="checkbox" />
  <span>Switch text</span>
</label>

Size

Small

html
Copy 
<label class="ds-switch --small">
  <input type="checkbox" />
  <span>Switch text</span>
</label>
html
Copy 
<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

html
Copy 
<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

html
Copy 
<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

html
Copy 
<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

html
Copy 
<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

html
Copy 
<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

html
Copy 
<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

html
Copy 
<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

html
Copy 
<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.

html
Copy 
<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

html
Copy 
<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

html
Copy 
<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

html
Copy 
<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

html
Copy 
<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

html
Copy 
<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>