Tailwind CSS Toggle - Flowbite
Use the toggle component to switch between a binary state of true or false using a single click available in multiple sizes, variants, and colors
The toggle component can be used to receive a simple “yes” or “no” type of answer from the user by choosing a single option from two options available in multiple sizes, styles, and colors coded with the utility classes from Tailwind CSS and with dark mode support.
Toggle example
Get started with the default toggle component example as a checkbox element to receive a true or false selection from the user.
<label for="default-toggle" class="inline-flex relative items-center cursor-pointer">
<input type="checkbox" value="" id="default-toggle" class="sr-only peer">
<div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 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 dark:border-gray-600 peer-checked:bg-blue-600"></div>
<span class="ml-3 text-sm font-medium text-gray-900 dark:text-gray-300">Toggle me</span>
</label>Checked state
Apply the checked attribute to the toggle component to activate the selection by default.
<label for="checked-toggle" class="inline-flex relative items-center cursor-pointer">
<input type="checkbox" value="" id="checked-toggle" class="sr-only peer" checked>
<div class="w-11 h-6 bg-gray-200 rounded-full peer peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
<span class="ml-3 text-sm font-medium text-gray-900 dark:text-gray-300">Checked toggle</span>
</label>Disabled state
Apply the disabled attribute to disallow the users from making any further selections.
<label for="disabled-toggle" class="inline-flex relative items-center mb-5 cursor-pointer">
<input type="checkbox" value="" id="disabled-toggle" class="sr-only peer" disabled>
<div class="w-11 h-6 bg-gray-200 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
<span class="ml-3 text-sm font-medium text-gray-400 dark:text-gray-500">Disabled toggle</span>
</label>
<label for="disabled-checked-toggle" class="inline-flex relative items-center cursor-pointer">
<input type="checkbox" value="" id="disabled-checked-toggle" class="sr-only peer" checked disabled>
<div class="w-11 h-6 bg-gray-200 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
<span class="ml-3 text-sm font-medium text-gray-400 dark:text-gray-500">Disabled checked</span>
</label>Colors
Change the color of the toggle component by updating the color classes of peer-focus and peer-checked.
<label for="red-toggle" class="inline-flex relative items-center mr-5 cursor-pointer">
<input type="checkbox" value="" id="red-toggle" class="sr-only peer" checked>
<div class="w-11 h-6 bg-gray-200 rounded-full peer peer-focus:ring-4 peer-focus:ring-red-300 dark:peer-focus:ring-red-800 dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-red-600"></div>
<span class="ml-3 text-sm font-medium text-gray-900 dark:text-gray-300">Red</span>
</label>
<label for="green-toggle" class="inline-flex relative items-center mr-5 cursor-pointer">
<input type="checkbox" value="" id="green-toggle" class="sr-only peer" checked>
<div class="w-11 h-6 bg-gray-200 rounded-full peer dark:bg-gray-700 peer-focus:ring-4 peer-focus:ring-green-300 dark:peer-focus:ring-green-800 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-green-600"></div>
<span class="ml-3 text-sm font-medium text-gray-900 dark:text-gray-300">Green</span>
</label>
<label for="purple-toggle" class="inline-flex relative items-center mr-5 cursor-pointer">
<input type="checkbox" value="" id="purple-toggle" class="sr-only peer" checked>
<div class="w-11 h-6 bg-gray-200 rounded-full peer dark:bg-gray-700 peer-focus:ring-4 peer-focus:ring-purple-300 dark:peer-focus:ring-purple-800 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-purple-600"></div>
<span class="ml-3 text-sm font-medium text-gray-900 dark:text-gray-300">Purple</span>
</label>
<label for="yellow-toggle" class="inline-flex relative items-center mr-5 cursor-pointer">
<input type="checkbox" value="" id="yellow-toggle" class="sr-only peer" checked>
<div class="w-11 h-6 bg-gray-200 rounded-full peer dark:bg-gray-700 peer-focus:ring-4 peer-focus:ring-yellow-300 dark:peer-focus:ring-yellow-800 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-yellow-400"></div>
<span class="ml-3 text-sm font-medium text-gray-900 dark:text-gray-300">Yellow</span>
</label>
<label for="teal-toggle" class="inline-flex relative items-center mr-5 cursor-pointer">
<input type="checkbox" value="" id="teal-toggle" class="sr-only peer" checked>
<div class="w-11 h-6 bg-gray-200 rounded-full peer dark:bg-gray-700 peer-focus:ring-4 peer-focus:ring-teal-300 dark:peer-focus:ring-teal-800 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-teal-600"></div>
<span class="ml-3 text-sm font-medium text-gray-900 dark:text-gray-300">Teal</span>
</label>
<label for="orange-toggle" class="inline-flex relative items-center mr-5 cursor-pointer">
<input type="checkbox" value="" id="orange-toggle" class="sr-only peer" checked>
<div class="w-11 h-6 bg-gray-200 rounded-full peer dark:bg-gray-700 peer-focus:ring-4 peer-focus:ring-orange-300 dark:peer-focus:ring-orange-800 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-orange-500"></div>
<span class="ml-3 text-sm font-medium text-gray-900 dark:text-gray-300">Orange</span>
</label>Sizes
Get started with small, default, or large sizes of the toggle component based on your needs.
<label for="small-toggle" class="inline-flex relative items-center mb-5 cursor-pointer">
<input type="checkbox" value="" id="small-toggle" class="sr-only peer">
<div class="w-9 h-5 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 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-blue-600"></div>
<span class="ml-3 text-sm font-medium text-gray-900 dark:text-gray-300">Small toggle</span>
</label>
<label for="default-toggle-size" class="inline-flex relative items-center mb-5 cursor-pointer">
<input type="checkbox" value="" id="default-toggle-size" class="sr-only peer">
<div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 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 dark:border-gray-600 peer-checked:bg-blue-600"></div>
<span class="ml-3 text-sm font-medium text-gray-900 dark:text-gray-300">Default toggle</span>
</label>
<label for="large-toggle" class="inline-flex relative items-center cursor-pointer">
<input type="checkbox" value="" id="large-toggle" class="sr-only peer">
<div class="w-14 h-7 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 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 dark:border-gray-600 peer-checked:bg-blue-600"></div>
<span class="ml-3 text-sm font-medium text-gray-900 dark:text-gray-300">Large toggle</span>
</label>