Tailwind CSS Checkbox

Class Name	Type	Description
checkbox	Component	Component class for checkbox.
form-control	Component	Container element.
label	Component	For helper text.
custom-option	Component	For custom checkbox container.
custom-label-option	Component	For custom checkbox container with background.
checkbox-primary	Modifier	Adds ‘primary’ color to checkbox.
checkbox-secondary	Modifier	Adds ‘secondary’ color to checkbox.
checkbox-accent	Modifier	Adds ‘accent’ color to checkbox.
checkbox-info	Modifier	Adds ‘info’ color to checkbox.
checkbox-success	Modifier	Adds ‘success’ color to checkbox.
checkbox-warning	Modifier	Adds ‘warning’ color to checkbox.
checkbox-error	Modifier	Adds ’error’ color to checkbox.
is-valid	Modifier	Adds success style to the input.
is-invalid	Modifier	Adds error style to the input.
checkbox-xs	Responsive	Checkbox with extra small size.
checkbox-sm	Responsive	Checkbox with small size.
checkbox-lg	Responsive	Checkbox with large size.

Basic example

Default

Basic checkbox example.

<div class="flex items-center gap-2">
  <input type="checkbox" class="checkbox" id="check1" />
  <label class="label-text text-base" for="check1">Default</label>
</div>
<div class="flex items-center gap-2">
  <input type="checkbox" class="checkbox" id="check3" checked />
  <label class="label-text text-base" for="check3">Checked</label>
</div>

Label and helper text

Utilize the form-control component class in conjunction with a label tag and implement styling using Tailwind CSS classes.

<label class="form-control flex gap-2">
  <input type="checkbox" class="checkbox checkbox-primary" />
  <span class="label -mt-1 cursor-pointer flex-col items-start pt-0">
    <span class="label-text text-base">Delete</span>
    <span class="label-text-alt">Notify me when this action happens.</span>
  </span>
</label>
<label class="form-control flex gap-2">
  <input type="checkbox" class="checkbox checkbox-primary" checked />
  <span class="label -mt-1 cursor-pointer flex-col items-start pt-0">
    <span class="label-text text-base">Archive</span>
    <span class="label-text-alt">Notify me when this action happens.</span>
  </span>
</label>

Color

Semantic colors

Apply a semantic color to the checkbox by using the checkbox-{semantic-color} modifier class together with the checkbox component class.

<label class="form-control flex items-center gap-1">
  <input type="checkbox" class="checkbox" checked />
  <span class="label cursor-pointer flex-col items-start">
    <span class="label-text text-base">Default</span>
  </span>
</label>
<label class="form-control flex items-center gap-1">
  <input type="checkbox" class="checkbox checkbox-primary" checked />
  <span class="label cursor-pointer flex-col items-start">
    <span class="label-text text-base">Primary</span>
  </span>
</label>
<label class="form-control flex items-center gap-1">
  <input type="checkbox" class="checkbox checkbox-secondary" checked />
  <span class="label cursor-pointer flex-col items-start">
    <span class="label-text text-base">Secondary</span>
  </span>
</label>
<label class="form-control flex items-center gap-1">
  <input type="checkbox" class="checkbox checkbox-accent" checked />
  <span class="label cursor-pointer flex-col items-start">
    <span class="label-text text-base">Accent</span>
  </span>
</label>
<label class="form-control flex items-center gap-1">
  <input type="checkbox" class="checkbox checkbox-info" checked />
  <span class="label cursor-pointer flex-col items-start">
    <span class="label-text text-base">Info</span>
  </span>
</label>
<label class="form-control flex items-center gap-1">
  <input type="checkbox" class="checkbox checkbox-success" checked />
  <span class="label cursor-pointer flex-col items-start">
    <span class="label-text text-base">Success</span>
  </span>
</label>
<label class="form-control flex items-center gap-1">
  <input type="checkbox" class="checkbox checkbox-warning" checked />
  <span class="label cursor-pointer flex-col items-start">
    <span class="label-text text-base">Warning</span>
  </span>
</label>
<label class="form-control flex items-center gap-1">
  <input type="checkbox" class="checkbox checkbox-error" checked />
  <span class="label cursor-pointer flex-col items-start">
    <span class="label-text text-base">Error</span>
  </span>
</label>

Custom colors

To customize the background color, use the CSS variable --chkbg, and to customize the foreground color, use the CSS variable --chkfg.

<label class="form-control flex items-center gap-1">
  <input type="checkbox" class="checkbox [--chkbg:#f0f]" checked />
  <span class="label cursor-pointer flex-col items-start">
    <span class="label-text text-base">hex code</span>
  </span>
</label>
<label class="form-control flex items-center gap-1">
  <input type="checkbox" class="checkbox [--chkbg:green]" checked />
  <span class="label cursor-pointer flex-col items-start">
    <span class="label-text text-base">Named color</span>
  </span>
</label>
<label class="form-control flex items-center gap-1">
  <input
    type="checkbox"
    class="checkbox [--chkbg:oklch(var(--p))]"
    checked/>
  <span class="label cursor-pointer flex-col items-start">
    <span class="label-text text-base">UI color CSS variable</span>
  </span>
</label>
<label class="form-control flex items-center gap-1">
  <input
    type="checkbox"
    class="checkbox [--chkbg:theme(colors.red.600)]"
    checked/>
  <span class="label cursor-pointer flex-col items-start">
    <span class="label-text text-base">Tailwind colors</span>
  </span>
</label>

Size

Checkbox sizes

Resize a checkbox by applying the checkbox-xs, checkbox-sm or checkbox-lg responsive classes to adjust its size to either extra-small, small or large.

<label class="form-control flex items-center">
  <input type="checkbox" class="checkbox checkbox-primary checkbox-xs" checked />
  <span class="label cursor-pointer flex-col items-start">
    <span class="label-text text-xs">Extra small</span>
  </span>
</label>
<label class="form-control flex items-center gap-0.5">
  <input type="checkbox" class="checkbox checkbox-primary checkbox-sm" checked />
  <span class="label cursor-pointer flex-col items-start">
    <span class="label-text text-sm">Small</span>
  </span>
</label>
<label class="form-control flex items-center gap-1">
  <input type="checkbox" class="checkbox checkbox-primary" checked />
  <span class="label cursor-pointer flex-col items-start">
    <span class="label-text text-base">Default</span>
  </span>
</label>
<label class="form-control flex items-center gap-1.5">
  <input type="checkbox" class="checkbox checkbox-primary checkbox-lg" checked />
  <span class="label cursor-pointer flex-col items-start">
    <span class="label-text text-lg">Large</span>
  </span>
</label>

Validation states

Success state

Success state can be show using is-valid class.

<label class="form-control flex gap-2">
  <input type="checkbox" class="checkbox checkbox-primary is-valid" checked/>
  <span class="label -mt-1 cursor-pointer flex-col items-start pt-0">
    <span class="label-text text-base">Delete</span>
    <span class="label-text-alt">Notify me when this action happens.</span>
  </span>
</label>

Error state

Error state can be show using is-invalid class.

<label class="form-control flex gap-2">
  <input type="checkbox" class="checkbox checkbox-primary is-invalid" />
  <span class="label -mt-1 cursor-pointer flex-col items-start pt-0">
    <span class="label-text text-base">Delete</span>
    <span class="label-text-alt">Notify me when this action happens.</span>
  </span>
</label>

Illustrations

Disabled

Prevent user interaction with the checkbox by adding the disabled attribute to make it non-selectable.

Indeterminate

The indeterminate state can be configured using JavaScript. To gain further insight into this concept, you can explore more about it here.

<div class="flex items-center gap-2">
  <input type="checkbox" class="checkbox checkbox-primary" id="check2" />
  <label class="label-text text-base" for="check2">Indeterminate</label>
</div>
<!-- You can make a checkbox indeterminate using JS -->
<script>
  document.getElementById("check2").indeterminate = true
</script>

Inline checkbox group

A group of checkbox components.

<div class="flex gap-4 horizontal-scrollbar">
  <label class="form-control flex items-center gap-2">
    <input type="checkbox" class="checkbox checkbox-primary" />
    <span class="label cursor-pointer flex-col items-start">
      <span class="label-text text-base">Vue</span>
    </span>
  </label>
  <label class="form-control flex items-center gap-2">
    <input type="checkbox" class="checkbox checkbox-primary" checked />
    <span class="label cursor-pointer flex-col items-start">
      <span class="label-text text-base">Angular</span>
    </span>
  </label>
  <label class="form-control flex items-center gap-2">
    <input type="checkbox" class="checkbox checkbox-primary" />
    <span class="label cursor-pointer flex-col items-start">
      <span class="label-text text-base">React</span>
    </span>
  </label>
</div>

Vertical checkbox group

A vertical group of checkbox components.

<div class="flex flex-col gap-2">
  <label class="form-control flex items-center gap-2">
    <input type="checkbox" class="checkbox checkbox-primary" />
    <span class="label cursor-pointer flex-col items-start">
      <span class="label-text text-base">Vue</span>
    </span>
  </label>
  <label class="form-control flex items-center gap-2">
    <input type="checkbox" class="checkbox checkbox-primary" checked />
    <span class="label cursor-pointer flex-col items-start">
      <span class="label-text text-base">Angular</span>
    </span>
  </label>
  <label class="form-control flex items-center gap-2">
    <input type="checkbox" class="checkbox checkbox-primary" />
    <span class="label cursor-pointer flex-col items-start">
      <span class="label-text text-base">React</span>
    </span>
  </label>
</div>

Below example shows a checkbox in dropdown.

To learn more about dropdowns, refer to the Dropdown documentation.

<div class="dropdown relative inline-flex [--auto-close:inside] rtl:[--placement:bottom-end]">
  <button id="dropdown-checkbox" type="button" class="dropdown-toggle btn btn-primary" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
    Dropdown checkbox
    <span class="icon-[tabler--chevron-down] dropdown-open:rotate-180 size-4"></span>
  </button>
  <div class="dropdown-menu dropdown-open:opacity-100 hidden min-w-60 space-y-0.5" role="menu" aria-orientation="vertical" aria-labelledby="dropdown-checkbox">
    <label class="dropdown-item flex-col items-center gap-4 sm:flex-row sm:items-start">
      <input type="checkbox" class="checkbox checkbox-primary mt-2" checked />
      <div class="label cursor-pointer flex-col items-center sm:items-start">
        <span class="label-text font-semibold">Rename</span>
        <span class="label-text-alt text-base-content/50 text-base">Notify me when this action happens.</span>
      </div>
    </label>
    <label class="dropdown-item flex-col items-center gap-4 sm:flex-row sm:items-start">
      <input type="checkbox" class="checkbox checkbox-primary mt-2" />
      <div class="label cursor-pointer flex-col items-center sm:items-start">
        <span class="label-text font-semibold">Move</span>
        <span class="label-text-alt text-base-content/50 text-base">Notify me when this action happens.</span>
      </div>
    </label>
  </div>
</div>

Checkbox list group

This example can be used to show a list of checkbox buttons inside a grouped list.

<h6 class="label-text text-base">Select your favorite language:</h6>
<div class="max-w-sm">
  <ul class="border-base-content/25 divide-base-content/25 divide-y rounded-box border *:p-3 first:*:rounded-t-box last:*:rounded-b-box">
    <li>
      <label class="form-control flex items-center gap-3">
        <input type="checkbox" class="checkbox checkbox-primary" />
        <span class="label cursor-pointer flex-col items-start">
          <span class="label-text text-base">C++</span>
        </span>
      </label>
    </li>
    <li>
      <label class="form-control flex items-center gap-3">
        <input type="checkbox" class="checkbox checkbox-primary" checked />
        <span class="label cursor-pointer flex-col items-start">
          <span class="label-text text-base">Ruby</span>
        </span>
      </label>
    </li>
    <li>
      <label class="form-control flex items-center gap-3">
        <input type="checkbox" class="checkbox checkbox-primary" />
        <span class="label cursor-pointer flex-col items-start">
          <span class="label-text text-base">Swift</span>
        </span>
      </label>
    </li>
  </ul>
</div>

Horizontal list group

Use this example to group up checkbox button components inside a list.

<h6 class="label-text text-base">Select your favorite language:</h6>
<div class="w-full">
  <ul class="border-base-content/25 divide-base-content/25 rounded-box first:*:rounded-t-box last:*:rounded-b-box first:*:sm:rounded-s-box last:*:sm:rounded-e-box flex flex-col divide-y border *:p-3 sm:flex-row sm:divide-x sm:divide-y-0 first:*:sm:rounded-tr-none last:*:sm:rounded-bl-none rtl:divide-x-reverse" >
    <li class="w-full">
      <label class="form-control flex items-center gap-3">
        <input type="checkbox" class="checkbox checkbox-primary" />
        <span class="label cursor-pointer flex-col items-start">
          <span class="label-text text-base">Python</span>
        </span>
      </label>
    </li>
    <li class="w-full">
      <label class="form-control flex items-center gap-3">
        <input type="checkbox" class="checkbox checkbox-primary" checked />
        <span class="label cursor-pointer flex-col items-start">
          <span class="label-text text-base">JavaScript</span>
        </span>
      </label>
    </li>
    <li class="w-full">
      <label class="form-control flex items-center gap-3">
        <input type="checkbox" class="checkbox checkbox-primary" />
        <span class="label cursor-pointer flex-col items-start">
          <span class="label-text text-base">Java</span>
        </span>
      </label>
    </li>
  </ul>
</div>

Custom options

Basic checkbox

Utilizing the custom-option class within the label enables the creation of custom checkbox buttons with improved styling and functionality.

<div class="flex w-full flex-wrap items-start gap-3 sm:flex-nowrap">
  <label class="custom-option flex flex-row items-start gap-3 sm:w-1/2">
    <input type="checkbox" class="checkbox checkbox-primary checkbox-sm" checked />
    <div class="-mt-1 w-full text-start">
      <span class="label">
        <span class="label-text text-base">Basic</span>
        <span class="label-text-alt text-base-content/50 text-base">Free</span>
      </span>
      <span class="label">
        <span class="label-text-alt text-sm">Get 1 project with 1 teams members.</span>
      </span>
    </div>
  </label>
  <label class="custom-option flex flex-row items-start gap-3 sm:w-1/2">
    <input type="checkbox" class="checkbox checkbox-primary checkbox-sm" />
    <div class="-mt-1 w-full text-start">
      <span class="label">
        <span class="label-text text-base">Premium</span>
        <span class="label-text-alt text-base-content/50 text-base">$ 5.00</span>
      </span>
      <span class="label">
        <span class="label-text-alt text-sm">Get 5 projects with 5 team members.</span>
      </span>
    </div>
  </label>
</div>

Hidden checkbox button

Utilize the hidden utility class to conceal the checkbox button.

<div class="flex w-full flex-wrap items-start gap-3 sm:flex-nowrap">
  <label class="custom-option flex flex-row items-start gap-4 sm:w-1/2">
    <input type="checkbox" class="checkbox hidden" checked />
    <div class="-mt-1 w-full text-start">
      <span class="label">
        <span class="label-text text-base">Basic</span>
        <span class="label-text-alt text-base-content/50 text-base">Free</span>
      </span>
      <span class="label">
        <span class="label-text-alt text-sm">Get 1 project with 1 teams members.</span>
      </span>
    </div>
  </label>
  <label class="custom-option flex flex-row items-start gap-4 sm:w-1/2">
    <input type="checkbox" class="checkbox hidden" />
    <div class="-mt-1 w-full text-start">
      <span class="label">
        <span class="label-text text-base">Premium</span>
        <span class="label-text-alt text-base-content/50 text-base">$ 5.00</span>
      </span>
      <span class="label">
        <span class="label-text-alt text-sm">Get 5 projects with 5 team members.</span>
      </span>
    </div>
  </label>
</div>

Basic label checkbox

Utilizing the custom-label-option class within the label demonstrates this distinctive styling approach, where the label background becomes primary when checked.

<div class="flex w-full flex-wrap items-start gap-3 sm:flex-nowrap">
  <label class="custom-label-option flex flex-row items-start gap-3 sm:w-1/2">
    <input type="checkbox" class="checkbox checkbox-primary checkbox-sm" checked />
    <div class="-mt-1 w-full text-start">
      <span class="label">
        <span class="label-text text-base">Basic</span>
        <span class="label-text-alt text-base-content/50 text-base">Free</span>
      </span>
      <span class="label">
        <span class="label-text-alt text-sm">Get 1 project with 1 teams members.</span>
      </span>
    </div>
  </label>
  <label class="custom-label-option flex flex-row items-start gap-3 sm:w-1/2">
    <input type="checkbox" class="checkbox checkbox-primary checkbox-sm" />
    <div class="-mt-1 w-full text-start">
      <span class="label">
        <span class="label-text text-base">Premium</span>
        <span class="label-text-alt text-base-content/50 text-base">$ 5.00</span>
      </span>
      <span class="label">
        <span class="label-text-alt text-sm">Get 5 projects with 5 team members.</span>
      </span>
    </div>
  </label>
</div>

Iconic custom checkbox

Customize the checkbox styling using utility classes according to your preferences, as illustrated below.

<div class="flex w-full flex-wrap items-start gap-3 sm:flex-nowrap">
  <label class="custom-option flex flex-col items-center gap-3 sm:w-1/2">
    <span class="icon-[tabler--rocket] size-10"></span>
    <div class="w-full">
      <span class="label flex-col !pb-0">
        <span class="label-text mb-1 text-base">Starter</span>
        <span class="label-text-alt text-sm"> Cake sugar plum fruitcake I love sweet roll jelly-o</span>
      </span>
    </div>
    <input type="checkbox" class="checkbox checkbox-primary checkbox-sm" />
  </label>
  <label class="custom-option flex flex-col items-center gap-3 sm:w-1/2">
    <span class="icon-[tabler--user] size-10"></span>
    <div class="w-full">
      <span class="label flex-col !pb-0">
        <span class="label-text mb-1 text-base">Personal</span>
        <span class="label-text-alt text-sm">Cake sugar plum fruitcake I love sweet roll jelly-o. </span>
      </span>
    </div>
    <input type="checkbox" class="checkbox checkbox-primary checkbox-sm" checked />
  </label>
  <label class="custom-option flex flex-col items-center gap-3 sm:w-1/2">
    <span class="icon-[tabler--crown] size-10"></span>
    <div class="w-full">
      <span class="label flex-col !pb-0">
        <span class="label-text mb-1 text-base">Enterprise</span>
        <span class="label-text-alt text-sm">Cake sugar plum fruitcake I love sweet roll jelly-o.</span>
      </span>
    </div>
    <input type="checkbox" class="checkbox checkbox-primary checkbox-sm" />
  </label>
</div>

Image as checkbox

This example displays an image as a checkbox button.

<div class="flex flex-nowrap items-start gap-3">
  <label class="custom-option relative p-0">
    <div class="w-full">
      <img src="https://cdn.flyonui.com/fy-assets/components/radio/image-6.png" class="bg-contain" alt="checkbox image" />
    </div>
    <input type="checkbox" class="checkbox checkbox-primary checkbox-sm absolute end-0 top-0 m-3 hidden checked:block hover:block" />
  </label>
  <label class="custom-option relative p-0">
    <div class="w-full">
      <img src="https://cdn.flyonui.com/fy-assets/components/radio/image-3.png" class="bg-contain" alt="checkbox image" />
    </div>
    <input type="checkbox" class="checkbox checkbox-primary checkbox-sm absolute end-0 top-0 m-3 hidden checked:block hover:block" checked />
  </label>
  <label class="custom-option relative p-0">
    <div class="w-full">
      <img src="https://cdn.flyonui.com/fy-assets/components/radio/image-5.png" class="bg-contain" alt="checkbox image" />
    </div>
    <input type="checkbox" class="checkbox checkbox-primary checkbox-sm absolute end-0 top-0 m-3 hidden checked:block hover:block" />
  </label>
</div>

FlyonUI