Checkbox

Usage

Use checkboxes when people can pick any number of options (including none) — inspection items, vehicle features, which depots to include in a report — or to confirm a single statement. Use radios when only one answer is allowed, and a switch for a setting that applies immediately.

• Group related checkboxes in a fieldset with a legend that asks the question.
• Write labels as the thing being chosen ("Tachograph calibrated"), not "Yes".
• Vertical by default; horizontal only for 2–3 short options.
• Indeterminate is only for a parent "select all" whose children are partly selected.

Anatomy

1. Box — input[type=checkbox].checkbox__input (native, appearance: none), 24px
2. Check / dash mark — masked ::before
3. Label — label.checkbox__label[for], part of the hit area
4. Hint (optional) — .checkbox__hint, wired with aria-describedby
5. Group — fieldset.checkbox-group with legend, hint, error and .checkbox-group__items

Examples

Hover and focus-visible are frozen with .is-hover and .is-focus-visible, which share their rules with the real pseudo-classes.

<div class="checkbox">
        <input class="checkbox__input" type="checkbox" id="tyres" name="checks" value="tyres" aria-describedby="tyres-hint">
        <label class="checkbox__label" for="tyres">Tyres checked for wear and pressure</label>
        <p class="checkbox__hint" id="tyres-hint">Minimum tread depth 1.6 mm.</p>
      </div>

      <!-- Invalid single checkbox -->
      <input class="checkbox__input" type="checkbox" id="safe" required aria-invalid="true" aria-describedby="safe-error">

      <!-- Select all: js/checkbox.js keeps checked / indeterminate in sync -->
      <input class="checkbox__input" type="checkbox" id="all" data-select-all aria-controls="v1 v2 v3">

<fieldset class="fieldset checkbox-group [checkbox-group--horizontal]" aria-describedby="depots-hint depots-error">
        <legend class="fieldset__legend">Which depots should the report include?</legend>
        <p class="field__hint" id="depots-hint">Select all that apply.</p>
        <p class="field__error" id="depots-error">…<span class="sr-only">Error: </span>Select at least one depot.</p>
        <div class="checkbox-group__items">
          <div class="checkbox">…North Yard…</div>
          <div class="checkbox">…Harbour Road…</div>
        </div>
      </fieldset>

API

Do and don't

Accessibility

• Role: native checkbox; the indeterminate state is announced as "mixed" / "half checked".
• Name from <label for>; clicking the label toggles, so the hit area is the whole text (box is 24px).
• Group: fieldset + legend gives the question; hint and error are linked to the fieldset with aria-describedby.
• Checked uses a check mark on a filled box, indeterminate a dash — shape plus color. Boxes have a 2px border at 3:1.
• Forced colors: the box uses CanvasText/Highlight and the mark stays visible.

Tokens