A toggle is a specific component that can be used as a solitary checkbox, or for something else.



  <input type="checkbox" class="toggle" ... />
  [label text]

Custom properties

The implementation is a slightly different from the form elements, as you will put the label text after the toggle in most cases. You can change these properties on the input[type="checkbox"] selector.

Custom property Description
--toggle-checked-color Sets the background color of the toggle on :checked. Default is green.
--toggle-dot-color Sets the dot color.
--toggle-size Sets the size of the white "dot" of the toggle.
--toggle-space Sets spacing around the white "dot" of the toggle.