Toggle

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

Example

Implementation

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

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.