inputcheckboxintermediate

Custom Checkbox

A styled checkbox with a checkmark icon, custom colors, and smooth transitions.

Preview
<label class="flex items-center gap-3 cursor-pointer">
  <div class="relative">
    <input type="checkbox" class="sr-only peer" />
    <div class="w-5 h-5 border-2 border-gray-300 rounded peer-checked:bg-blue-600 peer-checked:border-blue-600 transition-all"></div>
    <svg class="absolute top-0.5 left-0.5 w-4 h-4 text-white opacity-0 peer-checked:opacity-100 transition-opacity" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path></svg>
  </div>
  <span class="text-sm text-gray-700">I agree to the terms and conditions</span>
</label>

Color Breakdown

Border Unchecked

border-gray-300

#d1d5db

Checked Background

peer-checked:bg-blue-600

#2563eb

Checked Border

peer-checked:border-blue-600

#2563eb

Checkmark

text-white

#ffffff

Label

text-gray-700

#374151

Dark Mode Variant

Add these Tailwind classes for a dark mode adaptation of this recipe.

dark:border-gray-600 dark:text-gray-300 dark:peer-checked:bg-blue-500

Use Cases

Terms acceptanceTodo listsMulti-select filters

Browser Support

All modern browsers.

Related Recipes

Newsletter Section

section - beginner

Floating Label Input

input - intermediate

Gradient Form

form - intermediate

Dark Form

form - beginner

Pill Search Bar

input - beginner

Toggle Switch

input - intermediate

Build Your Own Color Recipe

Use our Tailwind CSS tools to experiment with colors, gradients, and component styles.

Explore Tools

Frequently Asked Questions

How do I make a radio button with this technique?▼
Change the input type to radio, use rounded-full instead of rounded on the box, and add a filled circle instead of a checkmark.