Toggles

Checkboxes, radios, and switches - custom styled form controls with validation states.

Checkboxes

Wrap a hidden input inside a label. The pseudo-elements create the visual indicator.

Code

<label class="checkbox">
  <input type="checkbox" name="option" value="1">
  Option label
</label>

Radios

Same pattern as checkboxes but with circular indicators.

Code

<label class="radio">
  <input type="radio" name="group" value="a">
  Option A
</label>

Size variants

Code

<label class="checkbox checkbox--large">...</label>

Color variants

Semantic colors for validation and status.

Code

<label class="checkbox checkbox--success">...</label>
<label class="checkbox checkbox--warning">...</label>
<label class="checkbox checkbox--error">...</label>

Icon-only checkbox

A compact checkbox that hides label text. Use in tables or matrices.

Code

<label class="checkbox checkbox--icon">
  <input type="checkbox" name="select" value="1">
  Select row
</label>

Check lists

Vertical and inline layouts for groups of checkboxes or radios.

Code

<ul class="check-list">
  <li><label class="checkbox">...</label></li>
</ul>

<ul class="check-list check-list--inline">
  <li><label class="checkbox">...</label></li>
</ul>

Inline layout:

Toggle switch

A pill-shaped on/off toggle built from a checkbox input.

Code

<label class="switch">
  <input type="checkbox" role="switch">
  <span></span>
  Enable feature
</label>