for the majority of its functionality, which has the advantage of not needing CSS or JavaScrip" title="Building a switch component">

Building a switch component

submited by

Style Pass

2021-08-12 17:00:09

This demo uses <input type="checkbox" role="switch"> for the majority of its functionality, which has the advantage of not needing CSS or JavaScript to be fully functional and accessible. Loading CSS brings support for right-to-left languages, verticality, animation and more. Loading JavaScript makes the switch draggable and tangible.

The following variables represent the various parts of the switch and their options. As the top-level class, .gui-switch contains custom properties used throughout the component children, and entry points for centralized customization.

To add a clear alias and reduce repetition, a reduced motion preference user media query can be put into a custom property with the PostCSS plugin based on this draft spec in Media Queries 5:

I chose to wrap my <input type="checkbox" role="switch"> element with a <label>, bundling their relationship to avoid checkbox and label association ambiguity, while giving the user the ability to interact with the label to toggle the input.