Checkbox

A checkbox allows users to select one or more options from a set.

<label class="tng-checkbox-control">
  <input type="checkbox" />
  <span>Unchecked</span>
</label>
<label class="tng-checkbox-control">
  <input type="checkbox" checked />
  <span>Checked</span>
</label>

Unchecked Checked

Elements

Grouping

Group related checkboxes in a <fieldset> with a <legend> to provide a shared group label for screen readers.

<fieldset class="tng-stack">
  <legend class="tng-text-title is-8 mb-xl">
    Notification preferences
  </legend>
  <label class="tng-checkbox-control">
    <input type="checkbox" />
    <span>Email</span>
  </label>
  <label class="tng-checkbox-control">
    <input type="checkbox" />
    <span>SMS</span>
  </label>
</fieldset>

Notification preferences

Email SMS

States

Disabled

<label class="tng-checkbox-control">
  <input type="checkbox" disabled />
  <span>Disabled</span>
</label>
<label class="tng-checkbox-control">
  <input type="checkbox" checked disabled />
  <span>Checked and disabled</span>
</label>

Disabled Checked and disabled

Accessibility

Semantic markup

Use a native <input type="checkbox">. The <label> wrapping pattern shown above keeps the label clickable and announced by screen readers. Do not replace checkbox behavior with non-semantic elements.

Keyboard interaction

• Tab moves focus to each checkbox.
• Space toggles checked/unchecked.
• Focus visibility is handled by the tng-focus-within utility.

Label and supporting text

Each checkbox needs a clear visible label. If additional helper or error text is present, connect it with aria-describedby.

Indeterminate state

There is no HTML attribute for the indeterminate state — set it via JavaScript (checkbox.indeterminate = true). Screen readers announce it as “mixed”.