Home > Tailwind Components > Checkbox

Tailwind CSS Checkbox

To use these form components, remember to:

1. Install the official Tailwind CSS forms plugin using: 

npm install -D @tailwindcss/forms

2. Add the plugin to your tailwind.config.js file: 

// tailwind.config.js
module.exports = {
    theme: {
    // ...
    },
    plugins: [
    require('@tailwindcss/forms'),
    // ...
    ],
}

1. Basic Checkbox

<div class="flex items-center">
  <input id="basic-checkbox" type="checkbox" class="h-4 w-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
  <label for="basic-checkbox" class="ml-2 text-gray-900">Basic Checkbox</label>
</div>

2. Checkbox Label Top Position

<div class="flex flex-col mt-4">
  <label for="top-label-checkbox" class="mb-2 text-gray-900">Top Label</label>
  <input id="top-label-checkbox" type="checkbox" class="h-4 w-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
</div>

3. Checkbox Label Left Position

<div class="flex items-center">
  <label for="left-label-checkbox" class="mr-2 text-gray-900">Left Label</label>
  <input id="left-label-checkbox" type="checkbox" class="h-4 w-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
</div>

4. Checkbox Group

<div class="flex flex-col space-y-2">
  <div class="flex items-center">
    <input id="option1" type="checkbox" class="h-4 w-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
    <label for="option1" class="ml-2 text-gray-900">Option 1</label>
  </div>
  <div class="flex items-center">
    <input id="option2" type="checkbox" class="h-4 w-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
    <label for="option2" class="ml-2 text-gray-900">Option 2</label>
  </div>
  <div class="flex items-center">
    <input id="option3" type="checkbox" class="h-4 w-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
    <label for="option3" class="ml-2 text-gray-900">Option 3</label>
  </div>
</div>

5. Checkbox Custom Styles

<div class="flex items-center">
  <input id="custom-checkbox" type="checkbox" class="h-5 w-5 text-green-500 border-green-300 rounded-full focus:ring-green-500">
  <label for="custom-checkbox" class="ml-2 text-green-700">Custom Styled Checkbox</label>
</div>

6. Checkbox Indeterminate (Requires Alpine JS)

<div
    x-data="{
      parentChecked: false,
      parentIndeterminate: false,
      child1: false,
      child2: false,
      child3: false,

      updateChildren() {
        this.child1 = this.parentChecked;
        this.child2 = this.parentChecked;
        this.child3 = this.parentChecked;
        this.updateParent();
      },

      updateParent() {
        const allChecked = this.child1 && this.child2 && this.child3;
        const someChecked = this.child1 || this.child2 || this.child3;

        this.parentChecked = allChecked;
        this.parentIndeterminate = !allChecked && someChecked;

        // Update the parent checkbox's indeterminate state directly
        this.$nextTick(() => {
          const parentCheckbox = this.$refs.parentCheckbox;
          parentCheckbox.indeterminate = this.parentIndeterminate;
        });
      }
    }"
    class="space-y-2"
>
      <!-- Parent Checkbox -->
    <label class="flex items-center font-bold">
        <input type="checkbox" class="h-4 w-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500" x-ref="parentCheckbox" x-model="parentChecked" @change="updateChildren()">
        <span class="ml-2">Select All</span>
    </label>

    <!-- Child Checkboxes -->
    <div class="ml-6 space-y-2">
        <label class="flex items-center">
            <input type="checkbox" class="h-4 w-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500" x-model="child1" @change="updateParent()">
            <span class="ml-2 text-gray-900">Child 1</span>
        </label>
        <label class="flex items-center">
            <input type="checkbox" class="h-4 w-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500" x-model="child2" @change="updateParent()">
            <span class="ml-2 text-gray-900">Child 2</span>
        </label>
        <label class="flex items-center">
            <input type="checkbox" class="h-4 w-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500" x-model="child3" @change="updateParent()">
            <span class="ml-2 text-gray-900">Child 3</span>
        </label>
    </div>
</div>