JS Checkable

Overview

The js-checkable module is used for creating styleable checkboxes, radio buttons, and toggles. To instantiate the module, simply wrap an input[type="checkbox"] or input[type="radio"] in an element with the class js-checkable.

Each checked js-checkable element is given the class is-checked to support styling. Note that this class toggling behavior is basically all the js-checkable module implements; all custom styling (including hiding of the original checkbox/radio) must be supplied by the user.

Examples

Checkboxes

Radio Buttons

Toggle Switches

The underlying markup uses a checkbox, but is styled to look like a toggle switch.