Switch
A checkbox with role="switch" drawn as a toggle.
On this page
Add role="switch" to a checkbox and it is drawn as a toggle. It is still a checkbox, so it submits and works with the keyboard the same way, and the role tells assistive technology it is a switch.
<fieldset>
<label>
<input name="terms" type="checkbox" role="switch" />
I agree to the Terms
</label>
<label>
<input name="opt-in" type="checkbox" role="switch" checked />
Receive news and offers
</label>
</fieldset>Disabled and invalid
<fieldset>
<label>
<input type="checkbox" role="switch" disabled />
Disabled
</label>
<label>
<input type="checkbox" role="switch" checked disabled />
Disabled, on
</label>
<label>
<input type="checkbox" role="switch" aria-invalid="true" />
Invalid
</label>
</fieldset>Customization
--pico-switch-background-color- Track color when off.
--pico-switch-checked-background-color- Track color when on.
--pico-switch-color- Thumb color.
The track is 2.25em by 1.25em, so the switch scales with the font size. See also Checkboxes.