• Lightest
  • Light
  • Dark
  • Darkest
  • Medium
  • Large
  • LTR
  • RTL

Switch

Component status
Verified
Last releasedOctober 20, 2020
Current version@spectrum-css/switch@1.0.0-beta.2

Variants


Standard
Verified

The on/off variant of the Switch.


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

<br>

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

Emphasis
Verified

The emphasized variant of the Switch.


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

<br>

<div class="spectrum-Switch spectrum-Switch--emphasized">
  <input type="checkbox" class="spectrum-Switch-input" id="switch-onoff-disabled-0" disabled>
  <span class="spectrum-Switch-switch"></span>
  <label class="spectrum-Switch-label" for="switch-onoff-disabled-0">Switch Off</label>
</div>
<div class="spectrum-Switch spectrum-Switch--emphasized">
  <input type="checkbox" class="spectrum-Switch-input" id="switch-onoff-disabled-1" checked disabled>
  <span class="spectrum-Switch-switch"></span>
  <label class="spectrum-Switch-label" for="switch-onoff-disabled-1">Switch On</label>
</div>

Migration Guide


Component renamed

Toggle is now known as Switch. Replace all .spectrum-ToggleSwitch* classnames with .spectrum-Switch*.

Quiet and emphasized

Spectrum has chosen the variant previously known as quiet to be the default and has added an emphasized variant with the same styles as the previous default.
If you were using the quiet variant, the .spectrum-Switch--quiet class is no longer required and can be removed.
If you need a switch to look like it did before this change, add .spectrum-Switch--emphasized.

A/B toggle variant removed

It’s been deprecated and removed. A similar use case could be served by using Radio buttons.