Checkbox

A Tailwind CSS checkbox component for toggling options on and off.

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

With label

Pair with a Label and wrap in a Field for accessible form fields. Connect them using matching for and id attributes so clicking the label toggles the checkbox and screen readers announce it correctly.

Accept terms and conditions

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

Group

Use multiple checkboxes with the same name for multi-select groups.

Dietary requirements

Vegetarian

Vegan

Gluten-free

Dairy-free

<div class="w-fit">
  <div class="field-group">
    <span class="label">Dietary requirements</span>
    <div class="field-group gap-3">
      <div class="field field-horizontal">
        <input
          type="checkbox"
          class="checkbox"
          id="dietary-requirements-vegetarian"
          name="dietary-requirements"
          checked=""
          value="vegetarian"
        />
        <label class="label" for="dietary-requirements-vegetarian">
          Vegetarian
        </label>
      </div>
      <div class="field field-horizontal">
        <input
          type="checkbox"
          class="checkbox"
          id="dietary-requirements-vegan"
          name="dietary-requirements"
          value="vegan"
        />
        <label class="label" for="dietary-requirements-vegan">Vegan</label>
      </div>
      <div class="field field-horizontal">
        <input
          type="checkbox"
          class="checkbox"
          id="dietary-requirements-gluten-free"
          name="dietary-requirements"
          value="gluten-free"
        />
        <label class="label" for="dietary-requirements-gluten-free">
          Gluten-free
        </label>
      </div>
      <div class="field field-horizontal">
        <input
          type="checkbox"
          class="checkbox"
          id="dietary-requirements-dairy-free"
          name="dietary-requirements"
          value="dairy-free"
        />
        <label class="label" for="dietary-requirements-dairy-free">
          Dairy-free
        </label>
      </div>
    </div>
  </div>
</div>

With descriptions

Add a description below each label for extra context.

Notifications

Email notifications

Receive updates about your account via email.

SMS notifications

Get text messages for important alerts.

Push notifications

Receive push notifications on your device.

<div class="w-fit">
  <div class="field-group">
    <span class="label">Notifications</span>
    <div class="field-group">
      <div class="field field-horizontal">
        <input
          type="checkbox"
          class="checkbox"
          id="notifications-email"
          name="notifications"
          value="email"
        />
        <div class="field-content">
          <label class="label" for="notifications-email">
            Email notifications
          </label>
          <p class="field-description">
            Receive updates about your account via email.
          </p>
        </div>
      </div>
      <div class="field field-horizontal">
        <input
          type="checkbox"
          class="checkbox"
          id="notifications-sms"
          name="notifications"
          value="sms"
        />
        <div class="field-content">
          <label class="label" for="notifications-sms">SMS notifications</label>
          <p class="field-description">Get text messages for important alerts.</p>
        </div>
      </div>
      <div class="field field-horizontal">
        <input
          type="checkbox"
          class="checkbox"
          id="notifications-push"
          name="notifications"
          value="push"
        />
        <div class="field-content">
          <label class="label" for="notifications-push">Push notifications</label>
          <p class="field-description">
            Receive push notifications on your device.
          </p>
        </div>
      </div>
    </div>
  </div>
</div>

Disabled

Add disabled to the checkbox and peer so the label dims to match.

Disabled checkbox

<div class="w-fit">
  <div class="field field-horizontal">
    <input type="checkbox" class="checkbox peer" id="disabled-cb" disabled="" />
    <label class="label" for="disabled-cb">Disabled checkbox</label>
  </div>
</div>

Card select

Use checkboxes inside cards for a visual multi-select layout.

Platform

Web Mobile API

<div class="w-full max-w-md">
  <div class="grid gap-3">
    <span class="label">Platform</span>
    <div class="grid gap-5" style="grid-template-columns: repeat(3, 1fr)">
      <label
        class="relative flex flex-col items-center gap-3 p-4 border rounded-lg cursor-pointer has-checked:border-primary has-checked:bg-primary/[2.5%]"
      >
        <input
          type="checkbox"
          class="sr-only"
          name="platform"
          checked=""
          value="web"
        />
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-6"><circle cx="12" cy="12" r="10"/><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"/><path d="M2 12h20"/></svg>
        <span class="label">Web</span>
      </label>
      <label
        class="relative flex flex-col items-center gap-3 p-4 border rounded-lg cursor-pointer has-checked:border-primary has-checked:bg-primary/[2.5%]"
      >
        <input type="checkbox" class="sr-only" name="platform" value="mobile" />
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-6"><rect width="14" height="20" x="5" y="2" rx="2" ry="2"/><path d="M12 18h.01"/></svg>
        <span class="label">Mobile</span>
      </label>
      <label
        class="relative flex flex-col items-center gap-3 p-4 border rounded-lg cursor-pointer has-checked:border-primary has-checked:bg-primary/[2.5%]"
      >
        <input type="checkbox" class="sr-only" name="platform" value="api" />
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-6"><path d="m16 18 6-6-6-6"/><path d="m8 6-6 6 6 6"/></svg>
        <span class="label">API</span>
      </label>
    </div>
  </div>
</div>

List select

Use checkboxes inside list items for a multi-select list with descriptions.

Features

Cloud storage

50 GB of secure cloud storage

Automatic backups

Daily backups with 30-day retention

Priority support

24/7 dedicated support team

<div class="w-full max-w-md">
  <div class="grid gap-3">
    <span class="label">Features</span>
    <div class="grid gap-3">
      <label
        class="relative flex items-start justify-between gap-3 p-4 border rounded-lg cursor-pointer has-checked:border-primary has-checked:bg-primary/[2.5%]"
      >
        <div class="flex-1 grid gap-2">
          <div class="label">Cloud storage</div>
          <div class="text-sm text-muted-foreground">
            50 GB of secure cloud storage
          </div>
        </div>
        <input
          type="checkbox"
          class="checkbox"
          name="features"
          checked=""
          value="storage"
        />
      </label>
      <label
        class="relative flex items-start justify-between gap-3 p-4 border rounded-lg cursor-pointer has-checked:border-primary has-checked:bg-primary/[2.5%]"
      >
        <div class="flex-1 grid gap-2">
          <div class="label">Automatic backups</div>
          <div class="text-sm text-muted-foreground">
            Daily backups with 30-day retention
          </div>
        </div>
        <input
          type="checkbox"
          class="checkbox"
          name="features"
          value="backup"
        />
      </label>
      <label
        class="relative flex items-start justify-between gap-3 p-4 border rounded-lg cursor-pointer has-checked:border-primary has-checked:bg-primary/[2.5%]"
      >
        <div class="flex-1 grid gap-2">
          <div class="label">Priority support</div>
          <div class="text-sm text-muted-foreground">
            24/7 dedicated support team
          </div>
        </div>
        <input
          type="checkbox"
          class="checkbox"
          name="features"
          value="support"
        />
      </label>
    </div>
  </div>
</div>

How it works

The checkbox component is a CSS-only utility class applied to a native <input type="checkbox"> element.

Structure

Use the .checkbox class on an <input type="checkbox">. Pair it with a .label element connected via for and id:

<input type="checkbox" class="checkbox" id="terms" />
<label class="label" for="terms">Accept terms</label>

Disabled state

Add disabled to the checkbox. Use peer on the checkbox so the label automatically dims via peer-disabled:

<input type="checkbox" class="checkbox peer" id="cb" disabled />
<label class="label" for="cb">Disabled</label>

Validation

Add aria-invalid="true" to show the checkbox in an error state:

<input type="checkbox" class="checkbox" aria-invalid="true" />

Class reference

Class	Description
`checkbox`	Base checkbox styles