Checkbox

The checkbox component (.checkbox) replaces the browser's default checkbox appearance with a styled box while keeping a real, visually-hidden native <input type="checkbox"> inside it for full accessibility and form-submission behavior. The wrapper is a <label> in a two-column grid: the styled box in the first column, the label text in the second, with an optional helper line beneath.

<label class="checkbox">
  <input type="checkbox" class="checkbox-input" checked>
  <span class="checkbox-box" aria-hidden="true">
    <svg class="checkbox-check" viewBox="0 0 16 16"><path d="M4 8l3 3 7-7"></path></svg>
    <svg class="checkbox-dash" viewBox="0 0 16 16"><path d="M3 8h12"></path></svg>
  </span>
  <span class="checkbox-label">Subscribe to digest</span>
</label>