21Checkbox

Native input with appearance:none — real semantics, keyboard behaviour and form participation kept; only the paint is ours. The input sits inside the label, so the whole row is the click target.

Use it for

Independent yes/no choices; multi-select lists
Indeterminate for "some children checked" (curriculum trees)

Not for

A setting that applies instantly — Switch
Mutually exclusive options — Radio

States

New courses About one a month. Blog posts Disabled

markup

<label class="ns-choice"><input type="checkbox" class="ns-checkbox" checked>
  <span class="ns-choice__text"><span class="ns-choice__label">New courses</span>
  <span class="ns-choice__help">About one a month.</span></span></label>
<label class="ns-choice"><input type="checkbox" class="ns-checkbox">
  <span class="ns-choice__text"><span class="ns-choice__label">Blog posts</span></span></label>
<label class="ns-choice"><input type="checkbox" class="ns-checkbox" disabled>
  <span class="ns-choice__text"><span class="ns-choice__label">Disabled</span></span></label>

Indeterminate

Section 2 — 3 of 5 lessons

markup

<label class="ns-choice"><input type="checkbox" class="ns-checkbox">
  <span class="ns-choice__text"><span class="ns-choice__label">Section 2 — 3 of 5 lessons</span></span></label>

Accessibility contract

Indeterminate is a DOM property, not an attribute — set it in JS (the React Checkbox handles this)
Forced-colors mode re-anchors the check to system colors