We just released 290+ PRO Blocks for React and Tailwind CSS. Check them out

Tailwind CSS Checkbox

Get started on your web projects with our Tailwind CSS checkbox which is an input control that allows the user to select one or more items from a set. You can use a checkbox for:

  • Selecting one or more options from a list
  • Presenting a list containing sub-selections
  • Turning an item on/off in a desktop environment (If you have a single option, avoid using a checkbox and use an on/off checkbox instead)

See below our easy-to-use checkbox component that you can use for your Tailwind CSS project.

Basic Checkbox

Create clean and accessible checkboxes using Tailwind CSS form utilities. This example shows how to build simple checkboxes with proper spacing and clear hover states.

1<div class="space-y-4 flex flex-col">
2  <div class="inline-flex items-center">
3    <label class="flex items-center cursor-pointer relative" for="default-checkbox">
4      <input type="checkbox" class="peer h-5 w-5 cursor-pointer transition-all appearance-none rounded shadow-sm  border border-slate-200 checked:bg-slate-800 checked:border-slate-800" id="default-checkbox" />
5      <span class="absolute text-white opacity-0 peer-checked:opacity-100 top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
6        <svg fill="none" width="18px" height="18px" stroke-width="2" color="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M5 13L9 17L19 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg>
7      </span>
8    </label>
9    <label class="cursor-pointer ml-2 text-slate-600 font-normal antialiased" for="default-checkbox">Default Checkbox</label>
10  </div>
11  <div class="inline-flex items-center">
12    <label class="flex items-center cursor-pointer relative" for="checked-checkbox">
13      <input type="checkbox" checked class="peer h-5 w-5 cursor-pointer transition-all appearance-none rounded shadow-sm  border border-slate-200 checked:bg-slate-800 checked:border-slate-800" id="checked-checkbox" />
14      <span class="absolute text-white opacity-0 peer-checked:opacity-100 top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
15        <svg fill="none" width="18px" height="18px" stroke-width="2" color="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M5 13L9 17L19 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg>
16      </span>
17    </label>
18    <label class="cursor-pointer ml-2 text-slate-600 font-normal antialiased" for="checked-checkbox">Checked Checkbox</label>
19  </div>
20</div>
21

Checkbox Colors

Style your checkboxes with Tailwind CSS color utilities. Use bg-slate-800, bg-slate-200, bg-blue-500, bg-green-500, bg-red-500, and bg-amber-500 to represent different states or categories.

1<div class="flex flex-wrap justify-center gap-4">
2  <div class="inline-flex items-center">
3    <label class="flex items-center cursor-pointer relative" for="checkbox-1">
4      <input type="checkbox" checked class="peer h-5 w-5 cursor-pointer transition-all appearance-none rounded shadow-sm  border border-slate-200 checked:bg-slate-800 checked:border-slate-800" id="checkbox-1" />
5      <span class="absolute text-white opacity-0 peer-checked:opacity-100 top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
6        <svg fill="none" width="18px" height="18px" stroke-width="2" color="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M5 13L9 17L19 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg>
7      </span>
8    </label>
9  </div>
10  <div class="inline-flex items-center">
11    <label class="flex items-center cursor-pointer relative" for="checkbox-2">
12      <input type="checkbox" checked class="peer h-5 w-5 cursor-pointer transition-all appearance-none rounded shadow-sm  border border-slate-200 checked:bg-slate-100 checked:border-slate-100" id="checkbox-2" />
13      <span class="absolute text-slate-800 opacity-0 peer-checked:opacity-100 top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
14        <svg fill="none" width="18px" height="18px" stroke-width="2" color="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M5 13L9 17L19 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg>
15      </span>
16    </label>
17  </div>
18  <div class="inline-flex items-center">
19    <label class="flex items-center cursor-pointer relative" for="checkbox-3">
20      <input type="checkbox" checked class="peer h-5 w-5 cursor-pointer transition-all appearance-none rounded shadow-sm  border border-slate-200 checked:bg-blue-500 checked:border-blue-500" id="checkbox-3" />
21      <span class="absolute text-white opacity-0 peer-checked:opacity-100 top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
22        <svg fill="none" width="18px" height="18px" stroke-width="2" color="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M5 13L9 17L19 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg>
23      </span>
24    </label>
25  </div>
26  <div class="inline-flex items-center">
27    <label class="flex items-center cursor-pointer relative" for="checkbox-4">
28      <input type="checkbox" checked class="peer h-5 w-5 cursor-pointer transition-all appearance-none rounded shadow-sm  border border-slate-200 checked:bg-green-500 checked:border-green-500" id="checkbox-4" />
29      <span class="absolute text-white opacity-0 peer-checked:opacity-100 top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
30        <svg fill="none" width="18px" height="18px" stroke-width="2" color="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M5 13L9 17L19 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg>
31      </span>
32    </label>
33  </div>
34  <div class="inline-flex items-center">
35    <label class="flex items-center cursor-pointer relative" for="checkbox-5">
36      <input type="checkbox" checked class="peer h-5 w-5 cursor-pointer transition-all appearance-none rounded shadow-sm  border border-slate-200 checked:bg-amber-500 checked:border-amber-500" id="checkbox-5" />
37      <span class="absolute text-white opacity-0 peer-checked:opacity-100 top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
38        <svg fill="none" width="18px" height="18px" stroke-width="2" color="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M5 13L9 17L19 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg>
39      </span>
40    </label>
41  </div>
42  <div class="inline-flex items-center">
43    <label class="flex items-center cursor-pointer relative" for="checkbox-6">
44      <input type="checkbox" checked class="peer h-5 w-5 cursor-pointer transition-all appearance-none rounded shadow-sm  border border-slate-200 checked:bg-red-500 checked:border-red-500" id="checkbox-6" />
45      <span class="absolute text-white opacity-0 peer-checked:opacity-100 top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
46        <svg fill="none" width="18px" height="18px" stroke-width="2" color="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M5 13L9 17L19 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg>
47      </span>
48    </label>
49  </div>
50</div>

Checkbox with Label

Build user-friendly checkboxes using Tailwind CSS typography utilities. Add clear labels that improve accessibility and user interaction.

1<div class="flex items-center gap-2">
2  <label class="flex items-center cursor-pointer relative" for="checkbox-with-label">
3    <input type="checkbox" class="peer h-5 w-5 cursor-pointer transition-all appearance-none rounded shadow-sm  border border-slate-200 checked:bg-slate-800 checked:border-slate-800" id="checkbox-with-label" />
4    <span class="absolute text-white opacity-0 peer-checked:opacity-100 top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
5      <svg fill="none" width="18px" height="18px" stroke-width="2" color="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M5 13L9 17L19 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg>
6    </span>
7  </label>
8  <label class="cursor-pointer text-slate-600 antialiased" for="checkbox-with-label">Remember Me</label>
9</div>

Checkbox with Icon

Enhance checkboxes with custom icons using Tailwind CSS flex utilities. Create unique checked states while maintaining accessibility.

1<div class="flex items-center gap-2">
2  <label class="flex items-center cursor-pointer relative" for="star">
3    <input type="checkbox" class="peer hidden" id="star" />
4    <span class="text-slate-400 peer-checked:text-slate-800">
5      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5">
6        <path fill-rule="evenodd" d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z" clip-rule="evenodd" />
7      </svg>
8    </span>
9    </span>
10  </label>
11</div>

Disabled Checkbox

Style inactive checkboxes using Tailwind CSS opacity utilities. Create clear visual feedback for non-interactive states.

1<div class="inline-flex items-center">
2    <label class="flex items-center cursor-pointer relative opacity-50 pointer-events-none" for="checkboxDisabled-1">
3      <input type="checkbox" disabled class="peer h-5 w-5 cursor-pointer transition-all appearance-none rounded shadow-sm  border border-slate-200 checked:bg-slate-800 checked:border-slate-800" id="checkboxDisabled-1" />
4      <span class="absolute text-white opacity-0 peer-checked:opacity-100 top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
5        <svg fill="none" width="18px" height="18px" stroke-width="2" color="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M5 13L9 17L19 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg>
6      </span>
7    </label>
8  </div>

Checkbox with Link

This example works perfectly if you want to make sure that users agree to your website's terms and conditions before signing up. Or you can just customize the text for your specific needs. It is designed for usability and clarity in consent-related scenarios.

1<div class="flex items-center gap-2">
2  <label class="flex items-center cursor-pointer relative" for="checkbox-with-link">
3    <input type="checkbox" class="peer h-5 w-5 cursor-pointer transition-all appearance-none rounded shadow-sm  border border-slate-200 checked:bg-slate-800 checked:border-slate-800" id="checkbox-with-link" />
4    <span class="absolute text-white opacity-0 peer-checked:opacity-100 top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
5      <svg fill="none" width="18px" height="18px" stroke-width="2" color="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M5 13L9 17L19 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg>
6    </span>
7  </label>
8  <label class="cursor-pointer text-slate-600 antialiased" for="checkbox-with-link">I agree with the <a href="#" class="text-slate-800">terms and conditions</a></label>
9</div>

Checkbox With Description

Use the example below for a more complex usage of a checkbox with a label that contains some description. It helps clearly communicate the purpose of the checkbox.

1<div class="flex gap-2">
2  <label class="flex items-start cursor-pointer relative" for="checkbox-description">
3    <input type="checkbox" class="peer h-5 w-5 cursor-pointer transition-all appearance-none rounded shadow-sm  border border-slate-200 checked:bg-slate-800 checked:border-slate-800" id="checkbox-description" />
4    <span class="absolute text-white opacity-0 peer-checked:opacity-100 top-2.5 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
5      <svg fill="none" width="18px" height="18px" stroke-width="2" color="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M5 13L9 17L19 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg>
6    </span>
7  </label>
8  <label for="checkbox-description" class="cursor-pointer">
9    <p class="font-sans antialiased text-base text-slate-800 font-semibold">Remember Me</p>
10    <small class="font-sans antialiased text-sm text-slate-600">You'll be able to login without password for 24 hours.</small>
11  </label>
12</div>

Checkbox with Custom Design

Create uniquely styled checkboxes using Tailwind CSS utilities. Customize the appearance while maintaining accessibility and user experience.

1<div class="inline-flex items-center">
2    <label class="flex items-center cursor-pointer relative" for="checkbox-custom">
3      <input type="checkbox" class="peer h-5 w-5 cursor-pointer transition-all appearance-none rounded-full shadow-sm  border border-slate-200 checked:bg-slate-800 checked:border-slate-800" id="checkbox-custom" />
4      <span class="absolute text-white opacity-0 peer-checked:opacity-100 top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
5        <svg fill="none" width="18px" height="18px" stroke-width="2" color="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M5 13L9 17L19 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg>
6      </span>
7    </label>
8  </div>

Checkbox Best Practices

  • Group related checkboxes together
  • Provide clear and concise labels
  • Ensure proper touch targets for mobile
  • Maintain consistent spacing
  • Include proper ARIA attributes
  • Use appropriate color contrast
  • Add visible focus states