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 
<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>

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>