Switch Component: Checkbox

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 [...]

Read article at scottaohara.github.io

Article Taxonomies

Categories: Terms: , , , , , Keywords: