Switch Component: Checkbox
Published: July 26, 2018
Last updated: August 6, 2020
Pattern to modify a checkbox into a switch component.
Version: [type=”checkbox”] styled to look like a switch
Example Text 1:
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 [...]