Checkbox

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

<label class="tng-checkbox-control">
  <input type="checkbox" />
  <span>Default</span>
</label>
<label class="tng-checkbox-control">
  <input type="checkbox" checked />
  <span>Checked</span>
</label>
<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 & Disabled</span>
</label>

Default Checked Disabled Checked & Disabled

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

Accessibility

Semantic markup

The <label> wrapping <input type="checkbox"> ensures the label is clickable and announced by screen readers. Do not break this association — always keep the input inside its label, or link them via for / id.

Keyboard interaction

• Space toggles the checkbox.
• Focus visibility is handled by the tng-focus-within utility.

Indeterminate state

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