Checkbox

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

Markup

<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>

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>

Live example

CheckedUncheckedDisabled