Switch

Component status
Contribution
Last releasedOctober 8, 2019
Current version@spectrum-css/toggle@2.0.0

Variants#


Standard#
Verified

The on/off variant of the Switch.


<div class="spectrum-ToggleSwitch">
  <input type="checkbox" class="spectrum-ToggleSwitch-input" id="toggle-onoff-0">
  <span class="spectrum-ToggleSwitch-switch"></span>
  <label class="spectrum-ToggleSwitch-label" for="toggle-onoff-0">Toggle Off</label>
</div>
<div class="spectrum-ToggleSwitch">
  <input type="checkbox" class="spectrum-ToggleSwitch-input" id="toggle-onoff-1" checked>
  <span class="spectrum-ToggleSwitch-switch"></span>
  <label class="spectrum-ToggleSwitch-label" for="toggle-onoff-1">Toggle On</label>
</div>

<br>

<div class="spectrum-ToggleSwitch">
  <input type="checkbox" class="spectrum-ToggleSwitch-input" id="toggle-onoff-disabled-0" disabled>
  <span class="spectrum-ToggleSwitch-switch"></span>
  <label class="spectrum-ToggleSwitch-label" for="toggle-onoff-disabled-0">Toggle Off</label>
</div>
<div class="spectrum-ToggleSwitch">
  <input type="checkbox" class="spectrum-ToggleSwitch-input" id="toggle-onoff-disabled-1" checked disabled>
  <span class="spectrum-ToggleSwitch-switch"></span>
  <label class="spectrum-ToggleSwitch-label" for="toggle-onoff-disabled-1">Toggle On</label>
</div>
Show markup

Quiet#
Verified

The quiet variant of the Switch.


<div class="spectrum-ToggleSwitch spectrum-ToggleSwitch--quiet">
  <input type="checkbox" class="spectrum-ToggleSwitch-input" id="toggle-onoff-0">
  <span class="spectrum-ToggleSwitch-switch"></span>
  <label class="spectrum-ToggleSwitch-label" for="toggle-onoff-0">Toggle Off</label>
</div>
<div class="spectrum-ToggleSwitch spectrum-ToggleSwitch--quiet">
  <input type="checkbox" class="spectrum-ToggleSwitch-input" id="toggle-onoff-1" checked>
  <span class="spectrum-ToggleSwitch-switch"></span>
  <label class="spectrum-ToggleSwitch-label" for="toggle-onoff-1">Toggle On</label>
</div>

<br>

<div class="spectrum-ToggleSwitch spectrum-ToggleSwitch--quiet">
  <input type="checkbox" class="spectrum-ToggleSwitch-input" id="toggle-onoff-disabled-0" disabled>
  <span class="spectrum-ToggleSwitch-switch"></span>
  <label class="spectrum-ToggleSwitch-label" for="toggle-onoff-disabled-0">Toggle Off</label>
</div>
<div class="spectrum-ToggleSwitch spectrum-ToggleSwitch--quiet">
  <input type="checkbox" class="spectrum-ToggleSwitch-input" id="toggle-onoff-disabled-1" checked disabled>
  <span class="spectrum-ToggleSwitch-switch"></span>
  <label class="spectrum-ToggleSwitch-label" for="toggle-onoff-disabled-1">Toggle On</label>
</div>
Show markup

A/B toggle#
Deprecated

The a/b toggle variant of the switch.

Do not use this variant of the switch


<div class="spectrum-ToggleSwitch spectrum-ToggleSwitch--ab">
  <label class="spectrum-ToggleSwitch-label" for="toggle-ab">A</label>
  <input type="checkbox" class="spectrum-ToggleSwitch-input" id="toggle-ab">
  <span class="spectrum-ToggleSwitch-switch"></span>
  <label class="spectrum-ToggleSwitch-label" for="toggle-ab">B</label>
</div>

<br>

<div class="spectrum-ToggleSwitch spectrum-ToggleSwitch--ab">
  <label class="spectrum-ToggleSwitch-label" for="toggle-ab-disabled">A</label>
  <input type="checkbox" class="spectrum-ToggleSwitch-input" id="toggle-ab-disabled" disabled>
  <span class="spectrum-ToggleSwitch-switch"></span>
  <label class="spectrum-ToggleSwitch-label" for="toggle-ab-disabled">B</label>
</div>
Show markup