- Light
- Dark
- Darkest
- Medium
- Large
- LTR
- RTL
- Default
- Express
Switch
Component status | Contribution |
---|---|
Current version | @spectrum-css/switch@5.1.3 |
Released | September 13, 2024 |
S2-foundations | @spectrum-css/switch@6.0.0-s2-foundations.16 |
Released | October 4, 2024 |
Variants
StandardContribution
The on/off variant of the Switch.
<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>
SizesContribution
The t-shirt sizes of the Switch.
<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>
EmphasisContribution
The emphasized variant of the Switch.
<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>
DisabledContribution
The disabled variant of the Switch.
<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.