Checkbox

The checkbox toggles a single option on or off, like accepting terms or picking items from a list. For a setting that takes effect immediately, reach for the switch; for choosing one option among several, use a radio group.

<div class="field-group">
  <div class="field field-horizontal">
    <input
      type="checkbox"
      class="checkbox"
      id="terms-checkbox"
      name="terms-checkbox"
    />
    <label class="label" for="terms-checkbox">
      Accept terms and conditions
    </label>
  </div>
  <div class="field field-horizontal">
    <input
      type="checkbox"
      class="checkbox"
      id="terms-checkbox-2"
      name="terms-checkbox-2"
      checked
    />
    <div class="field-content">
      <label class="label" for="terms-checkbox-2">
        Accept terms and conditions
      </label>
      <p class="field-description">
        By clicking this checkbox, you agree to the terms.
      </p>
    </div>
  </div>
  <div class="field field-horizontal">
    <input
      type="checkbox"
      class="checkbox"
      id="toggle-checkbox"
      name="toggle-checkbox"
      disabled
    />
    <label class="label" for="toggle-checkbox">Enable notifications</label>
  </div>
  <label class="label">
    <div class="field field-horizontal">
      <input
        type="checkbox"
        class="checkbox"
        id="toggle-checkbox-2"
        name="toggle-checkbox-2"
      />
      <div class="field-content">
        <span class="field-title">Enable notifications</span>
        <p class="field-description">
          You can enable or disable notifications at any time.
        </p>
      </div>
    </div>
  </label>
</div>

Usage

Add the checkbox class to an <input type="checkbox">.

Class	Description
`checkbox`	Add to an `<input type="checkbox">`

<input type="checkbox" class="checkbox" />

Examples

Basic

Lay the checkbox out with its label in a horizontal field.

<div class="field field-horizontal">
  <input
    type="checkbox"
    class="checkbox"
    id="terms-checkbox-basic"
    name="terms-checkbox-basic"
  />
  <label class="label" for="terms-checkbox-basic">
    Accept terms and conditions
  </label>
</div>

Description

Add supporting text under the label with a field-content block.

<div class="field field-horizontal">
  <input
    type="checkbox"
    class="checkbox"
    id="terms-checkbox-desc"
    name="terms-checkbox-desc"
    checked
  />
  <div class="field-content">
    <label class="label" for="terms-checkbox-desc">
      Accept terms and conditions
    </label>
    <p class="field-description">
      By clicking this checkbox, you hereby agree to the terms and conditions.
    </p>
  </div>
</div>

Disabled

Add disabled and the label dims with the checkbox.

<div class="field field-horizontal">
  <input
    type="checkbox"
    class="checkbox"
    id="toggle-checkbox-disabled"
    name="toggle-checkbox-disabled"
    disabled
  />
  <label class="label" for="toggle-checkbox-disabled">
    Enable notifications
  </label>
</div>

Invalid

Set aria-invalid on the checkbox for the error state.

<div class="field field-horizontal">
  <input
    type="checkbox"
    class="checkbox"
    id="terms-checkbox-invalid"
    name="terms-checkbox-invalid"
    aria-invalid="true"
  />
  <label class="label" for="terms-checkbox-invalid">
    Accept terms and conditions
  </label>
</div>

Group

Use multiple fields to create a checkbox list.

<fieldset class="field-set">
  <legend class="field-legend field-legend-label">
    Show these items on the desktop:
  </legend>
  <p class="field-description">
    Select the items you want to show on the desktop.
  </p>
  <div class="field-group gap-3">
    <div class="field field-horizontal">
      <input type="checkbox" class="checkbox" id="finder-hard-disks" checked />
      <label class="label font-normal" for="finder-hard-disks">
        Hard disks
      </label>
    </div>
    <div class="field field-horizontal">
      <input
        type="checkbox"
        class="checkbox"
        id="finder-external-disks"
        checked
      />
      <label class="label font-normal" for="finder-external-disks">
        External disks
      </label>
    </div>
    <div class="field field-horizontal">
      <input type="checkbox" class="checkbox" id="finder-cds-dvds" />
      <label class="label font-normal" for="finder-cds-dvds">
        CDs, DVDs, and iPods
      </label>
    </div>
    <div class="field field-horizontal">
      <input type="checkbox" class="checkbox" id="finder-connected-servers" />
      <label class="label font-normal" for="finder-connected-servers">
        Connected servers
      </label>
    </div>
  </div>
</fieldset>

Table

Use checkboxes in the first column of a table to make rows selectable; without visible labels, give them an aria-label.

<table class="table w-full max-w-lg">
  <thead class="table-header">
    <tr class="table-row">
      <th class="table-head w-8">
        <input type="checkbox" class="checkbox" aria-label="Select all" />
      </th>
      <th class="table-head">Name</th>
      <th class="table-head">Email</th>
      <th class="table-head">Role</th>
    </tr>
  </thead>
  <tbody class="table-body">
    <tr class="table-row">
      <td class="table-cell">
        <input
          type="checkbox"
          class="checkbox"
          checked
          aria-label="Select row"
        />
      </td>
      <td class="table-cell font-medium">Leila Navarro</td>
      <td class="table-cell">[email protected]</td>
      <td class="table-cell">Admin</td>
    </tr>
    <tr class="table-row">
      <td class="table-cell">
        <input type="checkbox" class="checkbox" aria-label="Select row" />
      </td>
      <td class="table-cell font-medium">Camille Laurent</td>
      <td class="table-cell">[email protected]</td>
      <td class="table-cell">Member</td>
    </tr>
    <tr class="table-row">
      <td class="table-cell">
        <input type="checkbox" class="checkbox" aria-label="Select row" />
      </td>
      <td class="table-cell font-medium">Theo Marchetti</td>
      <td class="table-cell">[email protected]</td>
      <td class="table-cell">Member</td>
    </tr>
  </tbody>
</table>