Tailwind CSS Checkbox

Class Name	Type	Description
checkbox	Component	Component class for checkbox.
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-1">
  <input type="checkbox" class="checkbox" id="defaultCheckbox1" />
  <label class="label label-text text-base" for="defaultCheckbox1">Default</label>
</div>
<div class="flex items-center gap-1">
  <input type="checkbox" class="checkbox" id="defaultCheckbox2" checked />
  <label class="label label-text text-base" for="defaultCheckbox2">Checked</label>
</div>

Label and helper text

Use the label class along with label-text for the main label and label-text-alt for helper text, applying styling through Tailwind CSS classes.

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

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

Color

Semantic colors

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

<div class="flex items-center gap-1">
  <input type="checkbox" class="checkbox" id="checkboxDefault" checked />
  <label class="label label-text text-base" for="checkboxDefault"> Default </label>
</div>
<div class="flex items-center gap-1">
  <input type="checkbox" class="checkbox checkbox-primary" id="checkboxPrimary" checked />
  <label class="label label-text text-base" for="checkboxPrimary"> Primary </label>
</div>
<div class="flex items-center gap-1">
  <input type="checkbox" class="checkbox checkbox-secondary" id="checkboxSecondary" checked />
  <label class="label label-text text-base " for="checkboxSecondary"> Secondary </label>
</div>
<div class="flex items-center gap-1">
  <input type="checkbox" class="checkbox checkbox-accent" id="checkboxAccent" checked />
  <label class="label label-text text-base" for="checkboxAccent"> Accent </label>
</div>
<div class="flex items-center gap-1">
  <input type="checkbox" class="checkbox checkbox-info" id="checkboxInfo" checked />
  <label class="label label-text text-base" for="checkboxInfo"> Info </label>
</div>
<div class="flex items-center gap-1">
  <input type="checkbox" class="checkbox checkbox-success" id="checkboxSuccess" checked />
  <label class="label label-text text-base" for="checkboxSuccess"> Success </label>
</div>
<div class="flex items-center gap-1">
  <input type="checkbox" class="checkbox checkbox-warning" id="checkboxWarning" checked />
  <label class="label label-text text-base" for="checkboxWarning"> Warning </label>
</div>
<div class="flex items-center gap-1">
  <input type="checkbox" class="checkbox checkbox-error" id="checkboxError" checked />
  <label class="label label-text text-base" for="checkboxError"> Error </label>
</div>

Custom colors

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

<div class="flex items-center gap-1">
  <input type="checkbox" class="checkbox [--chkbg:#f0f]" id="checkboxCustomColor1" checked />
  <label class="label label-text text-base" for="checkboxCustomColor1"> hex code </label>
</div>

<div class="flex items-center gap-1">
  <input type="checkbox" class="checkbox [--chkbg:green]" id="checkboxCustomColor2" checked />
  <label class="label label-text text-base" for="checkboxCustomColor2"> Named color </label>
</div>

<div class="flex items-center gap-1">
  <input type="checkbox" class="checkbox [--chkbg:oklch(var(--p))]" id="checkboxCustomColor3" checked/>
  <label class="label label-text text-base" for="checkboxCustomColor3"> FlyonUI color CSS variable </label>
</div>

<div class="flex items-center gap-1">
  <input type="checkbox" class="checkbox [--chkbg:theme(colors.red.600)]" id="checkboxCustomColor4" checked/>
  <label class="label label-text text-base" for="checkboxCustomColor4"> Tailwind colors </label>
</div>

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.

<div class="flex items-center">
  <input type="checkbox" class="checkbox checkbox-primary checkbox-xs" id="checkboxExtraSmall" checked />
  <label class="label label-text text-xs" for="checkboxExtraSmall"> Extra small </label>
</div>
<div class="flex items-center gap-0.5">
  <input type="checkbox" class="checkbox checkbox-primary checkbox-sm" id="checkboxSmall" checked />
  <label class="label label-text" for="checkboxSmall"> Small </label>
</div>
<div class="flex items-center gap-1">
  <input type="checkbox" class="checkbox checkbox-primary" id="checkboxSizeDefault" checked />
  <label class="label label-text text-base" for="checkboxSizeDefault"> Default </label>
</div>
<div class="flex items-center gap-1.5">
  <input type="checkbox" class="checkbox checkbox-primary checkbox-lg" id="checkboxLarge" checked />
  <label class="label label-text text-lg" for="checkboxLarge"> Large </label>
</div>

Validation states

Success state

Success state can be show using is-valid class.

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

Error state

Error state can be show using is-invalid class.

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

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-1">
  <input type="checkbox" class="checkbox checkbox-primary" id="check2" />
  <label class="label 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">
  <div class="flex items-center gap-2">
    <input type="checkbox" class="checkbox checkbox-primary" id="checkboxInline1" />
    <label class="label label-text text-base" for="checkboxInline1"> Vue </label>
  </div>
  <div class="flex items-center gap-2">
    <input type="checkbox" class="checkbox checkbox-primary" id="checkboxInline2" checked />
    <label class="label label-text text-base" for="checkboxInline2"> Angular </label>
  </div>
  <div class="flex items-center gap-2">
    <input type="checkbox" class="checkbox checkbox-primary" id="checkboxInline3" />
    <label class="label label-text text-base" for="checkboxInline3"> React </label>
  </div>
</div>

Vertical checkbox group

A vertical group of checkbox components.

<div class="flex flex-col gap-2">
  <div class="flex items-center gap-2">
    <input type="checkbox" class="checkbox checkbox-primary" id="checkboxVertical1" />
    <label class="label label-text text-base" for="checkboxVertical1"> Vue </label>
  </div>
  <div class="flex items-center gap-2">
    <input type="checkbox" class="checkbox checkbox-primary" id="checkboxVertical2" checked />
    <label class="label label-text text-base" for="checkboxVertical2"> Angular </label>
  </div>
  <div class="flex items-center gap-2">
    <input type="checkbox" class="checkbox checkbox-primary" id="checkboxVertical3" />
    <label class="label label-text text-base" for="checkboxVertical3"> React </label>
  </div>
</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">
    <div class="dropdown-item flex-col items-center gap-4 sm:flex-row sm:items-start">
      <input type="checkbox" class="checkbox checkbox-primary mt-2" id="checkboxDropdown1" checked />
      <label class="label cursor-pointer flex-col items-center sm:items-start" for="checkboxDropdown1">
        <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>
      </label>
    </div>
    <div class="dropdown-item flex-col items-center gap-4 sm:flex-row sm:items-start">
      <input type="checkbox" class="checkbox checkbox-primary mt-2" id="checkboxDropdown2" />
      <label class="label cursor-pointer flex-col items-center sm:items-start" for="checkboxDropdown2">
        <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>
      </label>
    </div>
  </div>
</div>

Checkbox list group

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

<h6 class="text-base text-base-content mb-1">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 first:*:rounded-t-box last:*:rounded-b-box">
    <li>
      <label class="flex cursor-pointer items-center gap-3 p-3">
        <input type="checkbox" class="checkbox checkbox-primary" />
        <span class="label label-text text-base"> C++ </span>
      </label>
    </li>
    <li>
      <label class="flex cursor-pointer items-center gap-3 p-3">
        <input type="checkbox" class="checkbox checkbox-primary" checked />
        <span class="label label-text text-base"> Ruby </span>
      </label>
    </li>
    <li>
      <label class="flex cursor-pointer items-center gap-3 p-3">
        <input type="checkbox" class="checkbox checkbox-primary" />
        <span class="label label-text text-base"> Swift </span>
      </label>
    </li>
  </ul>
</div>

Horizontal list group

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

<h6 class="text-base text-base-content mb-1">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 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="flex items-center cursor-pointer gap-3 p-3">
        <input type="checkbox" class="checkbox checkbox-primary" />
        <span class="label label-text text-base"> Python </span>
      </label>
    </li>
    <li class="w-full">
      <label class="flex items-center cursor-pointer gap-3 p-3">
        <input type="checkbox" class="checkbox checkbox-primary" checked />
        <span class="label label-text text-base"> JavaScript </span>
      </label>
    </li>
    <li class="w-full">
      <label class="flex items-center cursor-pointer gap-3 p-3">
        <input type="checkbox" class="checkbox checkbox-primary" />
        <span class="label label-text text-base"> Java </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 />
    <span 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>
    </span>
  </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" />
    <span 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>
    </span>
  </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 />
    <span 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>
    </span>
  </label>
  <label class="custom-option flex flex-row items-start gap-4 sm:w-1/2">
    <input type="checkbox" class="checkbox hidden" />
    <span 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>
    </span>
  </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 />
    <span 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>
    </span>
  </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" />
    <span 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>
    </span>
  </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>
    <span 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>
    </span>
    <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>
    <span 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>
    </span>
    <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>
    <span 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>
    </span>
    <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">
    <span class="w-full">
      <img src="https://cdn.flyonui.com/fy-assets/components/radio/image-6.png" class="bg-contain" alt="checkbox image" />
    </span>
    <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">
    <span class="w-full">
      <img src="https://cdn.flyonui.com/fy-assets/components/radio/image-3.png" class="bg-contain" alt="checkbox image" />
    </span>
    <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">
    <span class="w-full">
      <img src="https://cdn.flyonui.com/fy-assets/components/radio/image-5.png" class="bg-contain" alt="checkbox image" />
    </span>
    <input type="checkbox" class="checkbox checkbox-primary checkbox-sm absolute end-0 top-0 m-3 hidden checked:block hover:block" />
  </label>
</div>