• Light
  • Dark
  • Darkest
  • Medium
  • Large
  • LTR
  • RTL
  • Default
  • Express

Switch

Component status
Contribution
Current version@spectrum-css/switch@5.1.3
ReleasedSeptember 13, 2024
S2-foundations@spectrum-css/switch@6.0.0-s2-foundations.14
ReleasedSeptember 12, 2024
View guidelines
Spectrum website
View repository
GitHub
View package
npm

Variants

Standard
Contribution

The on/off variant of the Switch.


Show markup
<div class="spectrum-Switch spectrum-Switch--sizeM">
  <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--sizeM">
  <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--sizeM">
  <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--sizeM">
  <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>

Sizes
Contribution

The t-shirt sizes of the Switch.




Show markup

<div class="spectrum-Switch spectrum-Switch--sizeS">
  <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 Size S</label>
</div>

<br>

<div class="spectrum-Switch spectrum-Switch--sizeM">
  <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 Size M</label>
</div>

<br>

<div class="spectrum-Switch spectrum-Switch--sizeL">
  <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 Size L</label>
</div>

<br>

<div class="spectrum-Switch spectrum-Switch--sizeXL">
  <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 Size XL</label>
</div>

Emphasis
Contribution

The emphasized variant of the Switch.


Show markup
<div class="spectrum-Switch spectrum-Switch--sizeM spectrum-Switch--emphasized">
  <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--sizeM 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--sizeM 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--sizeM 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>

Disabled
Contribution

The disabled variant of the Switch.

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

Custom Properties API

This component can be modified via its --mod-* prefixed custom properties. A list of those prefixed custom properties can be found here.

Migration Guide

Component renamed

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

T-shirt sizing

Switch now supports t-shirt sizing and requires that you specify the size by adding a .spectrum-Switch–size* class. The default size is “medium”.

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.

Remove focus-ring class

We’ve migrated away from the focus-ring class in favor of the native :focus-visible pseudo-class due to changes in browser support.