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>

RTL

Add dir="rtl" to any parent element, typically <html>, to render right-to-left. See the RTL guide for details.

<div id="checkbox-rtl-demo" dir="rtl">
  <div class="field-group max-w-sm">
    <div class="field field-horizontal">
      <input type="checkbox" class="checkbox" id="checkbox-rtl-terms" />
      <label class="label" for="checkbox-rtl-terms" data-i18n="acceptTerms">قبول الشروط والأحكام</label>
    </div>
    <div class="field field-horizontal">
      <input type="checkbox" class="checkbox" id="checkbox-rtl-terms-2" checked />
      <div class="field-content">
        <label class="label" for="checkbox-rtl-terms-2" data-i18n="acceptTerms">قبول الشروط والأحكام</label>
        <p class="field-description" data-i18n="acceptTermsDescription">بالنقر على هذا المربع، فإنك توافق على الشروط.</p>
      </div>
    </div>
    <div class="field field-horizontal">
      <input type="checkbox" class="checkbox" id="checkbox-rtl-notifications" disabled />
      <label class="label" for="checkbox-rtl-notifications" data-i18n="enableNotifications">تفعيل الإشعارات</label>
    </div>
    <label class="label">
      <div class="field field-horizontal">
        <input type="checkbox" class="checkbox" id="checkbox-rtl-notifications-2" />
        <div class="field-content">
          <span class="field-title" data-i18n="enableNotifications">تفعيل الإشعارات</span>
          <p class="field-description" data-i18n="enableNotificationsDescription">يمكنك تفعيل أو إلغاء تفعيل الإشعارات في أي وقت.</p>
        </div>
      </div>
    </label>
  </div>
</div>
 
<script>
  const translations = {
    ar: { dir: "rtl", acceptTerms: "قبول الشروط والأحكام", acceptTermsDescription: "بالنقر على هذا المربع، فإنك توافق على الشروط.", enableNotifications: "تفعيل الإشعارات", enableNotificationsDescription: "يمكنك تفعيل أو إلغاء تفعيل الإشعارات في أي وقت." },
    he: { dir: "rtl", acceptTerms: "קבל תנאים והגבלות", acceptTermsDescription: "על ידי לחיצה על תיבת הסימון הזו, אתה מסכים לתנאים.", enableNotifications: "הפעל התראות", enableNotificationsDescription: "אתה יכול להפעיל או להשבית התראות בכל עת." },
    en: { dir: "ltr", acceptTerms: "Accept terms and conditions", acceptTermsDescription: "By clicking this checkbox, you agree to the terms.", enableNotifications: "Enable notifications", enableNotificationsDescription: "You can enable or disable notifications at any time." },
  };
  window.addEventListener("message", (e) => {
    const t = translations[e.data?.lang];
    if (e.data?.type !== "sp-language" || !t) return;
    document.getElementById("checkbox-rtl-demo").dir = t.dir;
    document.querySelectorAll("[data-i18n]").forEach((el) => {
      el.textContent = t[el.dataset.i18n];
    });
  });
</script>