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>
Examples
Tailwind CSS Checkbox Examples
Tailwind css 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.
Checkbox - With Description Example
A checkbox with multi-line description text below label for detailed explanations.
Receive emails about new products, features, and updates.
<!-- With Description -->
<div class="flex items-start gap-2">
<label class="relative flex items-center cursor-pointer pt-1">
<input type="checkbox"
class="peer w-4 h-4 border border-gray-400 shadow-xs shadow-sm rounded-sm">
</label>
<div class="flex flex-col items-start gap-1">
<label class="font-medium text-sm">Marketing emails</label>
<p class="text-neutral-500 text-sm">Receive emails about new products, features, and updates.</p>
</div>
</div>Checkbox with Subtitle and Description Example
A checkbox combining inline subtitle badge and multi-line description for maximum context
Get notified about important security updates and potential threats to your account.
<!-- With Subtitle and Description -->
<div class="flex items-start gap-2">
<label class="relative flex items-center cursor-pointer pt-1">
<input type="checkbox"
class="peer w-4 h-4 border border-gray-300 shadow-xs rounded-sm">
</label>
<div class="flex flex-col items-start gap-1">
<label class="font-medium text-sm">Security alerts <span
class="text-neutral-500 text-sm font-normal">Recommended</span></label>
<p class="text-neutral-500 text-sm">Get notified about important security updates and potential threats
to your account.</p>
</div>
</div>Todo Style Checkbox Example
A todo-style checkbox with strikethrough text when checked for task completion lists using Tailwind CSS
<!-- Todo Style Checkbox -->
<div class="flex items-center gap-2">
<label class="relative flex items-center gap-2 font-medium text-sm">
<input type="checkbox" class="peer w-4 h-4 border border-gray-300 rounded-sm
shadow-sm">
<span class="peer-checked:line-through peer-checked:text-gray-600">Complete the project
documentation</span>
</label>
</div>Horizontal List Checkbox Example
A horizontal checkbox list with flex-wrap layout for compact multi-select options like weekday selection using tailwind css
<!-- Horizontal List Checkbox -->
<div class="flex items-center gap-3 flex-wrap sm:flex-nowrap">
<div class="flex items-center gap-2">
<label class="relative flex items-center cursor-pointer">
<input type="checkbox"
class="peer w-4 h-4 border border-gray-300 shadow-xs rounded-sm">
<span
class="absolute inset-0 flex items-center justify-center text-white text-[10px] font-bold pointer-events-none peer-checked:before:content-['✓']"></span>
</label>
<label class="font-medium text-sm">Monday</label>
</div>
<div class="flex items-center gap-2">
<label class="relative flex items-center cursor-pointer">
<input type="checkbox"
class="peer w-4 h-4 border border-gray-300 shadow-xs rounded-sm">
<span
class="absolute inset-0 flex items-center justify-center text-white text-[10px] font-bold pointer-events-none peer-checked:before:content-['✓']"></span>
</label>
<label class="font-medium text-sm">Tuesday</label>
</div>
<div class="flex items-center gap-2">
<label class="relative flex items-center cursor-pointer">
<input type="checkbox"
class="peer w-4 h-4 border border-gray-300 shadow-xs rounded-sm">
<span
class="absolute inset-0 flex items-center justify-center text-white text-[10px] font-bold pointer-events-none peer-checked:before:content-['✓']"></span>
</label>
<label class="font-medium text-sm">Wednesday</label>
</div>
<div class="flex items-center gap-2">
<label class="relative flex items-center cursor-pointer">
<input type="checkbox"
class="peer w-4 h-4 border border-gray-300 shadow-xs rounded-sm">
<span
class="absolute inset-0 flex items-center justify-center text-white text-[10px] font-bold pointer-events-none peer-checked:before:content-['✓']"></span>
</label>
<label class="font-medium text-sm">Thursday</label>
</div>
<div class="flex items-center gap-2">
<label class="relative flex items-center cursor-pointer">
<input type="checkbox"
class="peer w-4 h-4 border border-gray-300 shadow-xs rounded-sm">
<span
class="absolute inset-0 flex items-center justify-center text-white text-[10px] font-bold pointer-events-none peer-checked:before:content-['✓']"></span>
</label>
<label class="font-medium text-sm">Friday</label>
</div>
</div>Vertical List Checkbox Example
A Vertical checkbox list with flex-wrap layout for compact multi-select options selection using tailwind css
<!-- Vertical List Checkbox -->
<div class="flex flex-col gap-3">
<div class="flex items-center gap-2">
<label class="relative flex items-center cursor-pointer">
<input type="checkbox"
class="peer w-4 h-4 border border-gray-300 shadow-xs rounded-sm">
</label>
<label class="font-medium text-sm">JavaScript</label>
</div>
<div class="flex items-center gap-2">
<label class="relative flex items-center cursor-pointer">
<input type="checkbox"
class="peer w-4 h-4 border border-gray-300 shadow-xs rounded-sm">
</label>
<label class="font-medium text-sm">TypeScript</label>
</div>
<div class="flex items-center gap-2">
<label class="relative flex items-center cursor-pointer">
<input type="checkbox"
class="peer w-4 h-4 border border-gray-300 shadow-xs rounded-sm">
</label>
<label class="font-medium text-sm">Python</label>
</div>
<div class="flex items-center gap-2">
<label class="relative flex items-center cursor-pointer">
<input type="checkbox"
class="peer w-4 h-4 border border-gray-300 shadow-xs rounded-sm">
</label>
<label class="font-medium text-sm">Java</label>
</div>
<div class="flex items-center gap-2">
<label class="relative flex items-center cursor-pointer">
<input type="checkbox"
class="peer w-4 h-4 border border-gray-300 shadow-xs rounded-sm">
</label>
<label class="font-medium text-sm">C#</label>
</div>
</div>Right-Aligned Checkbox Example
A right-aligned checkbox list with label-first layout for toggle-style controls like notification settings
<!-- Right-Aligned Checkbox -->
<div class="flex flex-col items-center gap-3">
<div class="flex items-center gap-2">
<label class="font-medium text-sm">Email notifications</label>
<label class="relative flex items-center cursor-pointer">
<input type="checkbox"
class="peer w-4 h-4 border border-gray-300 shadow-xs rounded-sm">
</label>
</div>
<div class="flex items-center gap-2">
<label class="font-medium text-sm">Push notifications</label>
<label class="relative flex items-center cursor-pointer">
<input type="checkbox"
class="peer w-4 h-4 border border-gray-300 shadow-xs rounded-sm">
</label>
</div>
<div class="flex items-center gap-2">
<label class="font-medium text-sm">SMS notifications</label>
<label class="relative flex items-center cursor-pointer">
<input type="checkbox"
</label>
</div>
</div>Nested List Checkbox Example
A nested checkbox list with parent-child relationships where parent controls all children for hierarchical selections
<div class="flex flex-col gap-3 text-sm">
<div class="flex items-center gap-2">
<input id="selectAll" type="checkbox" class="w-4 h-4 rounded border-gray-300" aria-checked="false" />
<label for="selectAll" class="select-none font-bold">Select all features</label>
</div>
<!-- Children -->
<fieldset class="pl-6 font-medium" id="optionsFieldset" aria-label="Options">
<div class="flex items-center gap-2">
<input id="opt1" type="checkbox" class="child-checkbox w-4 h-4 rounded border-gray-300" />
<label for="opt1" class="select-none">Analytics dashboard</label>
</div>
<div class="flex items-center gap-2">
<input id="opt2" type="checkbox" class="child-checkbox w-4 h-4 rounded border-gray-300" />
<label for="opt2" class="select-none">Advanced reporting</label>
</div>
<div class="flex items-center gap-2">
<input id="opt3" type="checkbox" class="child-checkbox w-4 h-4 rounded border-gray-300" />
<label for="opt3" class="select-none">Data export</label>
</div>
</fieldset>
</div>
1000+ Tailwind Blocks
Access over 1,000 ready-made Tailwind blocks with modern designs to accelerate your design process.
Explore More