Switch Component: Checkbox
Published: July 26, 2018
Last updated: August 6, 2020
Pattern to modify a checkbox into a switch component.
Pattern Demo
Version: [type=”checkbox”] styled to look like a switch
Example Text 1:
Version: [type=”checkbox”][role=”switch”]
Example Text 2:
Version: [type=”checkbox”][role=”switch”] – Alternate Markup/Style
Example Text 3:
Visual design note
-moz-appearance: none; does not completely remove the styling
from the checkbox in Firefox ESR. (works as expected in Firefox 60+).
The box-shadow to provide an outline of the control does not
render as expected in IE11, did work as expected in Edge (legacy).
IE and Edge (legacy) don’t respect the box-shadow in High Contrast mode.
Previously, the ::-ms-check was re-enabled so that people will at least see
a checkmark when the switch is on, and an empty oval when off. Chromium Edge does respect the
box-shadow fill, so this has been updated. I no longer have Legacy Edge to verify if
this introduces an issue there or not.
Pattern Details
Pattern Markup
<!– Version: [type=”checkbox”] styled to look like a switch –>
<label class=”check-switch” for=”switch_1″>
Example Text 1:
<input id=”switch_1″ type=”checkbox”>
<span aria-hidden=”true”></span>
</label>
<!– Version: [type=”checkbox”][role=”switch”] –>
<label class=”check-switch” for=”switch_2″>
Example Text 2:
<input id=”switch_2″ data-check-switch=”” [...]