Develop

Styles

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