Component
Tailwind CSS Toggle
The tailwind toggle button component can be used to select any one out of two available options viz. yes/ no, right/wrong, on/ off, true/false etc. it can be made available in multiple sizes, styles, and colors coded with the utility classes from Tailwind CSS.
Default Toggle
Following is the example of the basic tailwind toggle switch.
<label class="relative inline-flex items-center cursor-pointer">
<input type="checkbox" value="" class="sr-only peer">
<div class="w-9 h-5 bg-gray-200 hover:bg-gray-300 peer-focus:outline-0 peer-focus:ring-transparent rounded-full peer transition-all ease-in-out duration-500 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-indigo-600 hover:peer-checked:bg-indigo-700"></div>
</label>Toggle with description
You can also keep the description below each toggle if more explanation is required. check the toggle button tailwind example here.
Off
On
Toggle Button
Used to enable or disable options
Used to enable or disable options
<label class="relative flex items-center mb-5 cursor-pointer">
<input type="checkbox" value="" class="sr-only peer">
<div class="w-9 h-5 bg-gray-200 hover:bg-gray-300 peer-focus:outline-none rounded-full peer transition-all ease-in-out duration-500 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all dark:border-gray-600 peer-checked:bg-indigo-600 hover:peer-checked:bg-indigo-700 "></div>
<span class="ml-3 text-sm font-medium text-gray-600 ">Unchecked</span>
</label>
<label class="relative flex items-center mb-5 cursor-pointer">
<input type="checkbox" value="" class="sr-only peer" checked>
<div class="w-9 h-5 bg-gray-200 hover:bg-gray-300 peer-focus:outline-0 rounded-full peer transition-all ease-in-out duration-500 peer-checked:after:translate-x-full peer-checked:after:border-transparent after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all dark:border-gray-600 peer-checked:bg-indigo-600 hover:peer-checked:bg-indigo-700 "></div>
<span class="ml-3 text-sm font-medium text-gray-600 ">Checked</span>
</label>
<div class="flex items-center mb-5">
<span class="mr-3 text-sm font-medium text-gray-600 ">Off</span>
<label class="relative flex items-center cursor-pointer">
<input type="checkbox" value="" class="sr-only peer">
<div class="w-9 h-5 bg-gray-200 hover:bg-gray-300 peer-focus:outline-0 rounded-full peer transition-all ease-in-out duration-500 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all dark:border-gray-600 peer-checked:bg-indigo-600 hover:peer-checked:bg-indigo-700 "></div>
</label>
<span class="ml-3 text-sm font-medium text-gray-600 ">On</span>
</div>
<div class="flex items-center ">
<label class="relative inline-flex items-center mb-5 cursor-pointer">
<input type="checkbox" value="" class="sr-only peer">
<div class="w-9 h-5 bg-gray-200 hover:bg-gray-300 peer-focus:outline-0 rounded-full peer transition-all ease-in-out duration-500 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-indigo-600 hover:peer-checked:bg-indigo-700 "></div>
</label>
<div class="block">
<span class="ml-3 text-sm font-normal text-gray-600 mb-1">Toggle Button</span>
<br>
<span class="ml-3 text-sm font-normal text-gray-400 ">Used to enable or disable options</span>
</div>
</div>1000+ Tailwind Blocks
Access over 1,000 ready-made Tailwind blocks with modern designs to accelerate your design process.
Explore More
Disabled
Disabled attributes can be used to disallow users to perform any action using toggle switch tailwind.
<label class="relative flex items-center mb-5 cursor-pointer">
<input type="checkbox" value="" class="sr-only peer" disabled="">
<div class="w-9 h-5 bg-gray-100 peer-focus:outline-none rounded-full transition-all ease-in-out delay-150 peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-indigo-600 hover:peer-checked:bg-indigo-700 peer-disabled:opacity-50"></div>
<span class="ml-3 text-sm font-medium text-gray-600 peer-disabled:text-gray-300">Disabled toggle</span>
</label>
<label class="relative flex items-center cursor-pointer">
<input type="checkbox" value="" class="sr-only peer " disabled="" checked>
<div class="w-9 h-5 bg-gray-100 peer-focus:outline-none rounded-full transition-all ease-in-out delay-150 peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-indigo-200 hover:peer-checked:bg-indigo-200 peer-disabled:opacity-75"></div>
<span class="ml-3 text-sm font-medium text-gray-600 peer-disabled:text-gray-300">Disabled checked</span>
</label>Sizes
Based on the requirements starting from small, medium and large toggle sizes can be set in tailwind css toggle button.
<label class="relative flex items-center mb-5 cursor-pointer">
<input type="checkbox" value="" class="sr-only peer">
<div class="w-9 h-5 bg-gray-200 hover:bg-gray-300 peer-focus:outline-0 rounded-full peer transition-all ease-in-out duration-500 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-indigo-600 hover:peer-checked:bg-indigo-700 "></div>
<span class="ml-3 text-sm font-medium text-gray-600 ">Small</span>
</label>
<label class="relative flex items-center mb-5 cursor-pointer">
<input type="checkbox" value="" class="sr-only peer">
<div class="w-11 h-6 bg-gray-200 hover:bg-gray-300 peer-focus:outline-0 rounded-full peer transition-all ease-in-out duration-500 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-indigo-600 hover:peer-checked:bg-indigo-700 "></div>
<span class="ml-3 text-sm font-medium text-gray-600 ">Medium</span>
</label>
<label class="relative flex items-center mb-5 cursor-pointer">
<input type="checkbox" value="" class="sr-only peer">
<div class="w-14 h-7 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[4px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-6 after:w-6 after:transition-all peer-checked:bg-indigo-600 hover:peer-checked:bg-indigo-700"></div>
<span class="ml-3 text-sm font-medium text-gray-600 ">Large</span>
</label>Colors
Following tailwind css toggle switch examples show toggles with different colors.
<label class="relative flex items-center mb-5 cursor-pointer">
<input type="checkbox" value="" class="sr-only peer" checked="">
<div class="w-9 h-5 bg-red-200 hover:bg-red-300 peer-focus:outline-0 rounded-full peer transition-all ease-in-out duration-500 peer-checked:after:translate-x-full peer-checked:after:border-transparent after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-red-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-red-600 hover:peer-checked:bg-indigo-700 "></div>
<span class="ml-3 text-sm font-medium text-gray-600 ">Checked</span>
</label>
<label class="relative flex items-center mb-5 cursor-pointer">
<input type="checkbox" value="" class="sr-only peer" checked="">
<div class="w-9 h-5 bg-yellow-200 hover:bg-yellow-300 peer-focus:outline-0 rounded-full peer transition-all ease-in-out duration-500 peer-checked:after:translate-x-full peer-checked:after:border-transparent after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-yellow-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-yellow-400 hover:peer-checked:bg-indigo-700 "></div>
<span class="ml-3 text-sm font-medium text-gray-600 ">Checked</span>
</label>
<label class="relative flex items-center mb-5 cursor-pointer">
<input type="checkbox" value="" class="sr-only peer" checked="">
<div class="w-9 h-5 bg-green-200 hover:bg-green-300 peer-focus:outline-0 rounded-full peer transition-all ease-in-out duration-500 peer-checked:after:translate-x-full peer-checked:after:border-transparent after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-green-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-green-500 hover:peer-checked:bg-indigo-700 "></div>
<span class="ml-3 text-sm font-medium text-gray-600 ">Checked</span>
</label>
<label class="relative flex items-center mb-5 cursor-pointer">
<input type="checkbox" value="" class="sr-only peer" checked="">
<div class="w-9 h-5 bg-blue-200 hover:bg-blue-300 peer-focus:outline-0 rounded-full peer transition-all ease-in-out duration-500 peer-checked:after:translate-x-full peer-checked:after:border-transparent after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-blue-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-blue-500 hover:peer-checked:bg-indigo-700 "></div>
<span class="ml-3 text-sm font-medium text-gray-600 ">Checked</span>
</label>
1000+ Tailwind Blocks
Access over 1,000 ready-made Tailwind blocks with modern designs to accelerate your design process.
Explore More