Skip to content
MENU

Soracom

Design System

Switch

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

Text left 

Example using html <label> container
<label class="ds-switch--text-left">
  <input type="checkbox">
  <div>Switch text</div>
</label>

<label class="ds-switch--text-left">
  <input type="checkbox" disabled>
  <div>Switch text</div>
</label>
<label class="ds-switch--text-left">
  <input type="checkbox">
  <div>Switch text</div>
</label>

<label class="ds-switch--text-left">
  <input type="checkbox" disabled>
  <div>Switch text</div>
</label>
Example using html <div> container
<div class="ds-switch--text-left">
  <input type="checkbox" id="test5">
  <label for="test5">Switch text</label>
</div>

<div class="ds-switch--text-left">
  <input type="checkbox" id="test6" disabled>
  <label for="test6">Switch text</label>
</div>
<div class="ds-switch--text-left">
  <input type="checkbox" id="test5">
  <label for="test5">Switch text</label>
</div>

<div class="ds-switch--text-left">
  <input type="checkbox" id="test6" disabled>
  <label for="test6">Switch text</label>
</div>