Components

Tailwind CSS Checkbox Components - Madhuranjan UI

Explore a comprehensive collection of checkbox components built with Tailwind CSS. From simple and disabled checkboxes to advanced card layouts and colorful variations, these examples are designed to enhance your forms with responsive, theme-aware interactivity.

This curated selection of checkbox components offers versatile options for all your form needs. Whether you're looking for a clean, simple checkbox, one that includes helper text or links, or even an innovative checkbox integrated into a dropdown, our examples are crafted to provide both functionality and aesthetic appeal.

Simple Checkbox

A basic checkbox component with a clean design, perfect for standard form selections.

1  <div class="flex flex-col gap-3 justify-center items-center p-2 md:p-5">
2      <label class="inline-flex cursor-pointer items-center">
3        <input
4          type="checkbox"
5          class="relative h-6 w-6 cursor-pointer appearance-none rounded-md border-2 border-gray-300 transition-all duration-200 checked:border-blue-600 checked:bg-blue-600 checked:after:absolute checked:after:inset-0 checked:after:flex checked:after:items-center checked:after:justify-center checked:after:text-white checked:after:content-['✓'] focus:ring-2 focus:ring-blue-500 focus:outline-none"
6        />
7        <span class="ml-2 font-medium text-gray-800 dark:text-gray-50">
8          Default Checkbox
9        </span>
10      </label>

Disabled Checkbox

A checkbox component rendered in a disabled state to indicate non-interactivity.

1<div class="flex flex-col items-center justify-center gap-3 p-2 md:p-5">
2  <!-- Disabled Unchecked Checkbox -->
3  <label class="inline-flex cursor-not-allowed items-center opacity-60">
4    <input type="checkbox" disabled class="relative h-6 w-6 cursor-not-allowed appearance-none rounded-md border-2 border-gray-300 transition-all duration-200 focus:ring-2 focus:ring-blue-500 focus:outline-none" />
5    <span class="ml-2 font-medium text-gray-800 dark:text-gray-50"> Disabled Unchecked Checkbox </span>
6  </label>
7
8  <!-- Disabled Checked Checkbox -->
9  <label class="inline-flex cursor-not-allowed items-center opacity-60">
10    <input type="checkbox" disabled checked class="relative h-6 w-6 cursor-not-allowed appearance-none rounded-md border-2 border-gray-300 transition-all duration-200 checked:border-blue-600 checked:bg-blue-600 checked:after:absolute checked:after:inset-0 checked:after:flex checked:after:items-center checked:after:justify-center checked:after:text-white checked:after:content-['✓'] focus:ring-2 focus:ring-blue-500 focus:outline-none" />

Checkbox with Link

This checkbox integrates an embedded link, making it ideal for accepting terms and conditions.

1<div class="flex flex-col gap-3 justify-center items-center p-2 md:p-5">
2  <label class="inline-flex cursor-pointer items-center">
3    <input
4      type="checkbox"
5      class="relative h-6 w-6 cursor-pointer appearance-none rounded-md border-2 border-gray-300 transition-all duration-200
6             checked:border-blue-600 checked:bg-blue-600
7             checked:after:absolute checked:after:inset-0 checked:after:flex
8             checked:after:items-center checked:after:justify-center
9             checked:after:text-white checked:after:content-['✓']
10             focus:ring-2 focus:ring-blue-500 focus:outline-none"

Checkbox with Helper Text

A checkbox that provides additional helper text to guide users on its purpose.

By checking this box, you confirm that you have read and agree to our Terms & Conditions.

1<div class="flex flex-col gap-2 justify-center items-start p-4">
2  <label class="inline-flex items-center cursor-pointer">
3    <input
4      type="checkbox"
5      class="relative h-6 w-6 cursor-pointer appearance-none rounded-md border-2 border-gray-300 transition-all duration-200
6             focus:ring-2 focus:ring-blue-500 focus:outline-none
7             checked:border-blue-600 checked:bg-blue-600
8             checked:after:absolute checked:after:inset-0 checked:after:flex
9             checked:after:items-center checked:after:justify-center
10             checked:after:text-white checked:after:content-['✓']"

Bordered Checkbox

A stylish checkbox variant featuring a bordered design for a modern, minimalistic look.

1 <div class="flex items-center justify-center bg-gray-900 p-4">
2      <div class="flex gap-4 md:flex-row">
3        <label
4          class="flex cursor-pointer items-center rounded-md border border-gray-600 
5             px-4 py-2 text-gray-200 transition-colors hover:border-gray-400"
6        >
7          <input
8            type="radio"
9            name="example"
10            checked

Checkbox Dropdown

An innovative checkbox integrated within a dropdown, allowing users to select multiple options from a compact interface.

1  <div class="flex justify-center items-center p-5 ">
2      <div class="group relative inline-block text-left">
3        <button
4          type="button"
5          class="inline-flex w-56 items-center justify-between rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm transition-colors duration-150 hover:bg-gray-50 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-gray-100 focus:outline-none dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700 dark:focus:ring-offset-gray-800"
6          aria-haspopup="true"
7          aria-expanded="false"
8          id="options-menu"
9          onclick="this.nextElementSibling.classList.toggle('hidden')"
10        >

Colored Checkbox

A vibrant set of colored checkboxes that use accent colors to provide a dynamic visual experience.

1<div class="flex items-center justify-center gap-3 flex-wrap p-5">
2  <!-- Red -->
3  <div class="flex items-center">
4    <input checked id="red-checkbox" type="checkbox" value="" class="h-4 w-4 rounded-sm border-gray-300 bg-gray-100 accent-red-600 focus:ring-2 focus:ring-red-500 dark:border-gray-600 dark:bg-gray-700 dark:ring-offset-gray-800 dark:focus:ring-red-600" />
5    <label for="red-checkbox" class="ml-2 text-sm font-medium text-gray-900 dark:text-gray-300">Red</label>
6  </div>
7
8  <!-- Orange -->
9  <div class="flex items-center">
10    <input checked id="orange-checkbox" type="checkbox" value="" class="h-4 w-4 rounded-sm border-gray-300 bg-gray-100 accent-orange-500 focus:ring-2 focus:ring-orange-500 dark:border-gray-600 dark:bg-gray-700 dark:ring-offset-gray-800 dark:focus:ring-orange-600" />

Advanced Checkbox Card

A sophisticated checkbox designed as a card layout, combining visuals with functionality for an engaging user interface.

1<div class="flex justify-center items-center p-5 flex-wrap">
2  <ul class="flex flex-wrap gap-6 justify-center">
3    <!-- Node.js Card -->
4    <li class="w-full sm:w-1/2 md:w-1/3">
5      <input
6        type="checkbox"
7        id="node-option"
8        value="node"
9        class="peer sr-only"
10      />

Checkbox with Title and Description

This checkbox variant includes a title and a detailed description, providing clear context for user selections.

This is a description for the first list item, providing additional detail.
Second item's description text goes here to explain the selection.
Description for the third list item to clarify what it represents.
Fourth item's descriptive text elaborates details to the user.
1<div class="flex justify-center items-center p-4">
2  <div class="p-6 max-w-xl bg-white dark:bg-gray-900 shadow-lg">
3  <div class="space-y-4">
4    <div class="flex items-start gap-3">
5      <input
6        id="option1"
7        type="checkbox"
8        class="mt-1 h-5 w-5 rounded border-gray-300 dark:border-gray-700 text-violet-600 dark:text-blue-600 bg-gray-100 dark:bg-gray-800 focus:ring-violet-500 dark:focus:ring-blue-500"
9      />
10      <div class="flex flex-col">
Select DropdownRadio