Checkbox

Checkboxes for selecting one or more options. Labels automatically use flex layout when they contain checkboxes.

Control size uses --af-choice-size (default 1.5rem, shared with radio and the switch track height). Override it to scale all choice controls together — see Tokens.

Markup

Checked Unchecked Disabled

<div class="af-stack af-gap-sm">
  <label>
    <input type="checkbox" class="af-checkbox" checked />
    <span>Checked</span>
  </label>
  <label>
    <input type="checkbox" class="af-checkbox" />
    <span>Unchecked</span>
  </label>
  <label>
    <input type="checkbox" class="af-checkbox" disabled />
    <span>Disabled</span>
  </label>
</div>

Indeterminate

There is no af-is-indeterminate class. Set the native property in JavaScript. CSS paints a dash for :indeterminate.

const checkbox = document.querySelector('.af-checkbox');
checkbox.indeterminate = true;

Use this for mixed parent state (some children checked). Keep the accessible name on the label.

Classless checkbox

Checkboxes also work without classes inside form.af-form:

<form class="af-form">
  <label>
    <input type="checkbox" checked />
    <span>Enable notifications</span>
  </label>
</form>