Component
Tailwind CSS Checkbox
Tailwind Checkbox is used when one or more options need to be accepted from the user. There are various forms where one needs to give more than one choice here. By using the checkbox element you can accept multiple responses.
Requires Pagedone CSS
This component requires the use of our Pagedone UI as a package, else you can skip this message if you are already using Pagedone UI as a package.
Tailwind Custom Checkbox are like versatile square boxes available in a variety of styles, sizes and colors. These checkboxes can be seamlessly integrated into web forms with the help of tailwind css.
Default Checkbox
Following tailwind checkbox style shows checkboxes in checked and unchecked state.
<div class="flex items-center mb-4">
<input id="checkbox-default" type="checkbox" value="" class="w-5 h-5 appearance-none border cursor-pointer border-gray-300 rounded-md mr-2 hover:border-indigo-500 hover:bg-indigo-100 checked:bg-no-repeat checked:bg-center checked:border-indigo-500 checked:bg-indigo-100">
<label for="checkbox-default" class="text-sm font-norma cursor-pointer text-gray-600">Default checkbox</label>
</div>
<div class="flex items-center">
<input id="checked-checkbox" type="checkbox" value="" class="w-5 h-5 appearance-none cursor-pointer border border-gray-300 rounded-md mr-2 hover:border-indigo-500 hover:bg-indigo-100 checked:bg-no-repeat checked:bg-center checked:border-indigo-500 checked:bg-indigo-100" checked>
<label for="checked-checkbox" class="text-sm font-normal cursor-pointer text-gray-600"> Checked checkbox</label>
</div>Disabled
Following example is of disabled checkbox. Here, one cannot tick or select the box.
<div class="flex items-center mb-4">
<input id="disabled-checkbox" type="checkbox" value="" class="w-5 h-5 appearance-none cursor-not-allowed border border-gray-300 bg-gray-100 rounded-md mr-2 " disabled>
<label for="disabled-checkbox" class="text-gray-300 cursor-not-allowed text-sm font-normal ">Disabled checkbox</label>
</div>
<div class="flex items-center mb-4">
<input id="disabled-checked-checkbox" type="checkbox" value="" class="w-5 h-5 appearance-none cursor-not-allowed border border-gray-300 bg-gray-100 rounded-md mr-2 checked:bg-no-repeat checked:bg-center" checked disabled>
<label for="disabled-checked-checkbox" class="text-gray-300 cursor-not-allowed text-sm font-normal ">Disabled checkbox</label>
</div>Checkbox group
When more checkboxes are required to place without utilizing much space use follwoing tailwind multiselect checkbox example.
<div class="w-full relative space-y-5">
<div class="flex gap-x-6">
<div class="flex">
<input id="checkbox-group-1" type="checkbox" class="w-5 h-5 cursor-pointer appearance-none border border-gray-300 rounded-md mr-2 checked:bg-no-repeat checked:bg-center checked:border-indigo-500 checked:bg-indigo-100">
<label for="checkbox-group-1" class="text-sm font-normal cursor-pointer text-gray-600">Kiwi</label>
</div>
<div class="flex">
<input id="checkbox-group-2" type="checkbox" class="w-5 cursor-pointer h-5 appearance-none border border-gray-300 rounded-md mr-2 checked:bg-no-repeat checked:bg-center checked:border-indigo-500 checked:bg-indigo-100">
<label for="checkbox-group-2" class="text-sm font-normal cursor-pointer text-gray-600">Jackfruit</label>
</div>
<div class="flex">
<input id="checkbox-group-3" type="checkbox" class="w-5 cursor-pointer h-5 appearance-none border border-gray-300 rounded-md mr-2 checked:bg-no-repeat checked:bg-center checked:border-indigo-500 checked:bg-indigo-100">
<label for="checkbox-group-3" class="text-sm font-normal cursor-pointer text-gray-600">Mango</label>
</div>
</div>
<div class="flex gap-x-6">
<div class="flex">
<input id="checkbox-group-4" type="checkbox" class="w-5 cursor-pointer h-5 appearance-none border border-gray-300 rounded-md mr-2 checked:bg-no-repeat checked:bg-center checked:border-indigo-500 checked:bg-indigo-100" checked>
<label for="checkbox-group-4" class="text-sm font-normal cursor-pointer text-gray-600">Kiwi</label>
</div>
<div class="flex">
<input id="checkbox-group-5" type="checkbox" class="w-5 cursor-pointer h-5 appearance-none border border-gray-300 rounded-md mr-2 checked:bg-no-repeat checked:bg-center checked:border-indigo-500 checked:bg-indigo-100" checked>
<label for="checkbox-group-5" class="text-sm font-normal cursor-pointer text-gray-600">Jackfruit</label>
</div>
<div class="flex">
<input id="checkbox-group-6" type="checkbox" class="w-5 cursor-pointer h-5 appearance-none border border-gray-300 rounded-md mr-2 checked:bg-no-repeat checked:bg-center checked:border-indigo-500 checked:bg-indigo-100" checked>
<label for="checkbox-group-6" class="text-sm font-normal cursor-pointer text-gray-600">Mango</label>
</div>
</div>
<div class="flex gap-x-6">
<div class="flex">
<input id="checkbox-group-7" type="checkbox" class="w-5 h-5 appearance-none cursor-not-allowed border border-gray-300 bg-gray-100 rounded-md mr-2 checked:bg-no-repeat checked:bg-center" checked disabled>
<label for="checkbox-group-7" class="text-sm font-normal cursor-not-allowed text-gray-600">Kiwi</label>
</div>
<div class="flex">
<input id="checkbox-group-8" type="checkbox" class="w-5 h-5 appearance-none cursor-not-allowed border border-gray-300 bg-gray-100 rounded-md mr-2 " disabled>
<label for="checkbox-group-8" class="text-sm font-normal cursor-not-allowed text-gray-600">Jackfruit</label>
</div>
<div class="flex">
<input id="checkbox-group-9" type="checkbox" class="w-5 h-5 appearance-none cursor-not-allowed border border-gray-300 bg-gray-100 rounded-md mr-2 " disabled>
<label for="checkbox-group-9" class="text-sm font-normal cursor-not-allowed text-gray-600">Mango</label>
</div>
</div>
</div>1000+ Tailwind Blocks
Access over 1,000 ready-made Tailwind blocks with modern designs to accelerate your design process.
Explore More
List with description
Tailwind CSS checkboxs which let you read what it is all about.
<div class="grid space-y-5">
<div class="flex ">
<input id="checkbox-des1" type="checkbox" class="w-5 h-5 appearance-none cursor-pointer border border-gray-300 rounded-md mr-2 checked:bg-no-repeat checked:bg-center checked:border-indigo-500 checked:bg-indigo-100">
<label for="checkbox-des1" class=" cursor-pointer">
<h6 class="text-sm font-normal text-gray-600">Check box</h6>
<p class="text-sm font-normal text-gray-400 mt-1 w-full">Used for selecting multiple options</p>
</label>
</div>
<div class="flex ">
<input id="checkbox-des2" type="checkbox" class="w-5 h-5 appearance-none cursor-pointer border border-gray-300 rounded-md mr-2 checked:bg-no-repeat checked:bg-center checked:border-indigo-500 checked:bg-indigo-100" checked>
<label for="checkbox-des2" class=" cursor-pointer">
<h6 class="text-sm font-normal text-gray-600">Check box</h6>
<p class="text-sm font-normal text-gray-400 mt-1 w-full">Used for selecting multiple options</p>
</label>
</div>
<div class="flex ">
<input id="checkbox-des3" type="checkbox" class="w-5 h-5 appearance-none cursor-not-allowed border border-gray-300 bg-gray-100 rounded-md mr-2 " disabled>
<label for="checkbox-des3">
<h6 class="text-sm font-normal text-gray-300 cursor-not-allowed">Check box</h6>
<p class="text-sm font-normal text-gray-300 mt-1 w-full cursor-not-allowed">Used for selecting multiple options</p>
</label>
</div>
<div class="flex ">
<input id="checkbox-des3" type="checkbox" class="w-5 h-5 appearance-none cursor-not-allowed border border-gray-300 bg-gray-100 rounded-md mr-2 checked:bg-no-repeat checked:bg-center" checked disabled>
<label for="checkbox-des3">
<h6 class="text-sm font-normal text-gray-300 cursor-not-allowed">Check box</h6>
<p class="text-sm font-normal text-gray-300 mt-1 w-full cursor-not-allowed">Used for selecting multiple options</p>
</label>
</div>
</div>Checkbox link
This checkbox in Tailwind CSS will have a link incorporated with it.
<div class="flex items-center">
<input id="link-checkbox" type="checkbox" value="" class="w-5 h-5 cursor-pointer appearance-none border border-gray-300 rounded-md mr-2 hover:border-indigo-500 hover:bg-indigo-100 checked:bg-no-repeat checked:bg-center checked:border-indigo-500 checked:bg-indigo-100">
<label for="link-checkbox" class="text-sm font-normal cursor-pointer text-gray-600">I agree with the <a href="javascript:;" class="text-indigo-600">terms and conditions.</a></label>
</div>Checkbox Indeterminate
These checkboxes are known as indeterminate state checkboxes. it is a different state from being checked or unchecked.
<div class="grid space-y-5">
<div class="flex items-center">
<input id="intermediate-checkbox" type="checkbox" class="border cursor-pointer border-gray-300 rounded-md w-5 h-5 appearance-none bg-no-repeat bg-center checked:border-indigo-500 checked:bg-indigo-100 indeterminate:border-indigo-500 indeterminate:bg-indigo-100 mr-2 " indeterminate>
<label for="intermediate-checkbox" class="text-sm font-normal cursor-pointer text-gray-600">Checkbox indeterminate</label>
</div>
<div class="flex items-center">
<input id="intermediate-checkbox-disabled" type="checkbox" class="cursor-not-allowed border disabled:border-gray-300 disabled:bg-gray-100 rounded-md w-5 h-5 appearance-none bg-no-repeat bg-center mr-2 " indeterminate disabled>
<label for="intermediate-checkbox-disabled" class="text-sm font-normal text-gray-600 cursor-not-allowed">Checkbox indeterminate</label>
</div>
</div>Checkbox sizes
by using the following example you can make them available in different sizes.
<div class="flex items-center space-x-5">
<div class="flex items-center">
<input id="small-checkbox" type="checkbox" class="w-4 cursor-pointer h-4 appearance-none border border-gray-300 rounded-md mr-2 checked:bg-no-repeat checked:bg-center checked:border-indigo-500 checked:bg-indigo-100">
<label for="small-checkbox" class="text-xs font-normal cursor-pointer text-gray-600">Small </label>
</div>
<div class="flex items-center">
<input id="medium-checkbox" type="checkbox" class="w-5 cursor-pointer h-5 appearance-none border border-gray-300 rounded-md mr-2 checked:bg-no-repeat checked:bg-center checked:border-indigo-500 checked:bg-indigo-100">
<label for="medium-checkbox" class="text-sm font-normal cursor-pointer text-gray-600">Medium </label>
</div>
<div class="flex items-center">
<input id="large-checkbox" type="checkbox" class="w-6 cursor-pointer h-6 appearance-none border border-gray-300 rounded-md mr-2 checked:bg-no-repeat checked:bg-center checked:border-indigo-500 checked:bg-indigo-100">
<label for="large-checkbox" class="text-md font-normal cursor-pointer text-gray-600">Large </label>
</div>
</div>1000+ Tailwind Blocks
Access over 1,000 ready-made Tailwind blocks with modern designs to accelerate your design process.
Explore More
Checkbox within form input
This type of tailwind style checkboxs can be kept inside a form to get inputs.
<div class="grid sm:grid-cols-2 gap-2">
<label for="checkbox-in-form" class="flex p-3 w-full cursor-pointer bg-white border border-gray-300 rounded-md text-sm ">
<input type="checkbox" class="w-5 h-5 appearance-none cursor-pointer border border-gray-300 rounded-md mr-2 checked:bg-no-repeat checked:bg-center checked:border-indigo-500 checked:bg-indigo-100" id="checkbox-in-form">
<span class="text-sm font-normal text-gray-600 ml-2">Default checkbox</span>
</label>
<label for="checkbox-checked-in-form" class="flex p-3 cursor-pointer w-full bg-white border border-gray-300 rounded-md text-sm ">
<input type="checkbox" class="w-5 h-5 appearance-none cursor-pointer border border-gray-300 rounded-md mr-2 checked:bg-no-repeat checked:bg-center checked:border-indigo-500 checked:bg-indigo-100" id="checkbox-checked-in-form" checked>
<span class="text-sm font-normal text-gray-600 ml-2">Checked checkbox</span>
</label>
</div>On right
When the checkbox is kept on the right side and description text is on the left.
<div class="grid sm:grid-cols-2 gap-2">
<label for="checkbox-in-form1" class="flex p-3 cursor-pointer w-full bg-white border border-gray-300 rounded-md text-sm ">
<span class="text-sm font-normal text-gray-600 ml-2">Default checkbox</span>
<input type="checkbox" class="w-5 h-5 ml-auto cursor-pointer appearance-none border border-gray-300 rounded-md checked:bg-no-repeat checked:bg-center checked:border-indigo-500 checked:bg-indigo-100" id="checkbox-in-form1">
</label>
<label for="checkbox-checked-in-form1" class="flex p-3 cursor-pointer w-full bg-white border border-gray-300 rounded-md text-sm ">
<span class="text-sm font-normal text-gray-600 ml-2">Checked checkbox</span>
<input type="checkbox" class="w-5 h-5 ml-auto appearance-none cursor-pointer border border-gray-300 rounded-md checked:bg-no-repeat checked:bg-center checked:border-indigo-500 checked:bg-indigo-100" id="checkbox-checked-in-form1" checked>
</label>
</div>With list group
Here in this example of Checkbox in Tailwind CSS, list items can be shown as checkbox
<ul class="max-w-sm flex flex-col">
<li class="inline-flex items-center gap-x-2 py-3 px-4 text-sm font-medium bg-white border text-gray-600 -mt-px first:rounded-t-lg first:mt-0 last:rounded-b-lg ">
<div class="relative flex items-start w-full">
<div class="flex items-center h-5">
<input id="list-group-item-checkbox-1" name="list-group-item-checkbox-1" type="checkbox" class="w-5 cursor-pointer h-5 appearance-none border border-gray-300 rounded-md checked:bg-no-repeat checked:bg-center checked:border-indigo-500 checked:bg-indigo-100" checked="">
</div>
<label for="list-group-item-checkbox-1" class="ml-3.5 block text-sm font-normal text-gray-600 cursor-pointer "> Kiwi </label>
</div>
</li>
<li class="inline-flex items-center gap-x-2 py-3 px-4 text-sm font-medium bg-white border text-gray-800 -mt-px first:rounded-t-lg first:mt-0 last:rounded-b-lg dark:bg-gray-800 dark:border-gray-700 dark:text-white">
<div class="relative flex items-start w-full">
<div class="flex items-center h-5">
<input id="list-group-item-checkbox-2" name="list-group-item-checkbox-1" type="checkbox" class="w-5 cursor-pointer h-5 appearance-none border border-gray-300 rounded-md checked:bg-no-repeat checked:bg-center checked:border-indigo-500 checked:bg-indigo-100">
</div>
<label for="list-group-item-checkbox-2" class="ml-3.5 block text-sm font-normal text-gray-600 cursor-pointer "> Jackfruit </label>
</div>
</li>
<li class="inline-flex items-center gap-x-2 py-3 px-4 text-sm font-medium bg-white border text-gray-800 -mt-px first:rounded-t-lg first:mt-0 last:rounded-b-lg dark:bg-gray-800 dark:border-gray-700 dark:text-white">
<div class="relative flex items-start w-full">
<div class="flex items-center h-5">
<input id="list-group-item-checkbox-3" name="list-group-item-checkbox-1" type="checkbox" class="w-5 cursor-pointer h-5 appearance-none border border-gray-300 rounded-md checked:bg-no-repeat checked:bg-center checked:border-indigo-500 checked:bg-indigo-100">
</div>
<label for="list-group-item-checkbox-3" class="ml-3.5 block text-sm font-normal text-gray-600 cursor-pointer "> Mango </label>
</div>
</li>
</ul>With horizontal list group
Same as the list group option but here options are shown horizontally.
<ul class="flex flex-col sm:flex-row">
<li class="inline-flex items-center gap-x-2.5 py-3 px-4 text-sm font-medium bg-white border text-gray-600 -mt-px first:rounded-t-lg first:mt-0 last:rounded-b-lg sm:-ml-px sm:mt-0 sm:first:rounded-tr-none sm:first:rounded-bl-lg sm:last:rounded-bl-none sm:last:rounded-tr-lg ">
<div class="relative flex items-start w-full">
<div class="flex items-center h-5">
<input id="list-group-item-checkbox-4" name="list-group-item-checkbox-1" type="checkbox" class="w-5 cursor-pointer h-5 appearance-none border border-gray-300 rounded-md checked:bg-no-repeat checked:bg-center checked:border-indigo-500 checked:bg-indigo-100" checked="">
</div>
<label for="list-group-item-checkbox-4" class="ml-3.5 block text-sm font-normal text-gray-600 cursor-pointer "> Kiwi </label>
</div>
</li>
<li class="inline-flex items-center gap-x-2.5 py-3 px-4 text-sm font-medium bg-white border text-gray-600 -mt-px first:rounded-t-lg first:mt-0 last:rounded-b-lg sm:-ml-px sm:mt-0 sm:first:rounded-tr-none sm:first:rounded-bl-lg sm:last:rounded-bl-none sm:last:rounded-tr-lg ">
<div class="relative flex items-start w-full">
<div class="flex items-center h-5">
<input id="list-group-item-checkbox-5" name="list-group-item-checkbox-1" type="checkbox" class="w-5 cursor-pointer h-5 appearance-none border border-gray-300 rounded-md checked:bg-no-repeat checked:bg-center checked:border-indigo-500 checked:bg-indigo-100">
</div>
<label for="list-group-item-checkbox-5" class="ml-3.5 block text-sm font-normal text-gray-600 cursor-pointer "> Jackfruit </label>
</div>
</li>
<li class="inline-flex items-center gap-x-2.5 py-3 px-4 text-sm font-medium bg-white border text-gray-600 -mt-px first:rounded-t-lg first:mt-0 last:rounded-b-lg sm:-ml-px sm:mt-0 sm:first:rounded-tr-none sm:first:rounded-bl-lg sm:last:rounded-bl-none sm:last:rounded-tr-lg ">
<div class="relative flex items-start w-full">
<div class="flex items-center h-5">
<input id="list-group-item-checkbox-6" name="list-group-item-checkbox-1" type="checkbox" class="w-5 cursor-pointer h-5 appearance-none border border-gray-300 rounded-md checked:bg-no-repeat checked:bg-center checked:border-indigo-500 checked:bg-indigo-100">
</div>
<label for="list-group-item-checkbox-6" class="ml-3.5 block text-sm font-normal text-gray-600 cursor-pointer "> Mango </label>
</div>
</li>
</ul>
1000+ Tailwind Blocks
Access over 1,000 ready-made Tailwind blocks with modern designs to accelerate your design process.
Explore More