Checkboxes

Any number of choices. Or one box to confirm something.

Which documents do you have? Select all that apply

National ID card International passport Birth certificate

Show HTML

<fieldset class="ag-field ag-mb-0">
  <legend class="ag-legend">Which documents do you have?</legend>
  <span class="ag-hint" id="cb-docs-hint">Select all that apply</span>
  <div class="ag-choices" aria-describedby="cb-docs-hint">
    <label class="ag-checkbox">
      <input type="checkbox" name="docs" value="id" checked />
      <span class="ag-checkbox__label" data-docs-string="id-document">National ID card</span>
    </label>
    <label class="ag-checkbox">
      <input type="checkbox" name="docs" value="passport" />
      <span class="ag-checkbox__label">International passport</span>
    </label>
    <label class="ag-checkbox">
      <input type="checkbox" name="docs" value="birth" />
      <span class="ag-checkbox__label">Birth certificate</span>
    </label>
  </div>
</fieldset>

A single confirmation

I confirm that the information I have given is correct

Show HTML

<div class="ag-field ag-mb-0">
  <label class="ag-checkbox">
    <input type="checkbox" name="confirm" value="yes" />
    <span class="ag-checkbox__label">I confirm that the information I have given is correct</span>
  </label>
</div>

Accessibility

Group related checkboxes in a fieldset with the question as the legend. Say "Select all that apply" in the hint.
A single confirmation needs no fieldset; the label is the question.
Never pre-tick a consent box. It is both bad practice and, in many countries, unlawful.
The tick is drawn in white, which passes on every pack's primary because the build guarantees it.

Pack fields

id.document for the name of the national ID document.