Use our Tailwind CSS switch component to let users adjust settings on/off. The option that the switch controls, as well as the state it's in, should be made clear from the corresponding inline label.
Switch components are used in various scenarios in web development, including settings options, feature toggles, form inputs, interactive controls, accessibility options, and more.
Use the following examples to create a simple and easy-to-use switch component for your Tailwind CSS project.
Use this simple component example that changes the background color, border color, and shadow of the switch when it is in the "checked" state.
<div class="inline-flex items-center">
<div class="relative inline-block w-8 h-4 rounded-full cursor-pointer">
<input id="switch-component" type="checkbox"
class="absolute w-8 h-4 transition-colors duration-300 rounded-full appearance-none cursor-pointer peer bg-blue-gray-100 checked:bg-gray-900 peer-checked:border-gray-900 peer-checked:before:bg-gray-900"
defaultChecked />
<label htmlFor="switch-component"
class="before:content[''] absolute top-2/4 -left-1 h-5 w-5 -translate-y-2/4 cursor-pointer rounded-full border border-blue-gray-100 bg-white shadow-md transition-all duration-300 before:absolute before:top-2/4 before:left-2/4 before:block before:h-10 before:w-10 before:-translate-y-2/4 before:-translate-x-2/4 before:rounded-full before:bg-blue-gray-500 before:opacity-0 before:transition-opacity hover:before:opacity-10 peer-checked:translate-x-full peer-checked:border-gray-900 peer-checked:before:bg-gray-900">
<div class="inline-block p-5 rounded-full top-2/4 left-2/4 -translate-x-2/4 -translate-y-2/4"
data-ripple-dark="true"></div>
</label>
</div>
</div>In this example, you can see how to implement your switch to be checked by default.
<div class="inline-flex items-center">
<div class="relative inline-block w-8 h-4 rounded-full cursor-pointer">
<input id="switch" type="checkbox"
class="absolute w-8 h-4 transition-colors duration-300 rounded-full appearance-none cursor-pointer peer bg-blue-gray-100 checked:bg-gray-900 peer-checked:border-gray-900 peer-checked:before:bg-gray-900"
defaultChecked />
<label htmlFor="switch"
class="before:content[''] absolute top-2/4 -left-1 h-5 w-5 -translate-y-2/4 cursor-pointer rounded-full border border-blue-gray-100 bg-white shadow-md transition-all duration-300 before:absolute before:top-2/4 before:left-2/4 before:block before:h-10 before:w-10 before:-translate-y-2/4 before:-translate-x-2/4 before:rounded-full before:bg-blue-gray-500 before:opacity-0 before:transition-opacity hover:before:opacity-10 peer-checked:translate-x-full peer-checked:border-gray-900 peer-checked:before:bg-gray-900">
<div class="inline-block p-5 rounded-full top-2/4 left-2/4 -translate-x-2/4 -translate-y-2/4"
data-ripple-dark="true"></div>
</label>
</div>
</div>Check out this example to see how you can create a colored diverse set of toggle switches that can be used for various settings or options in a web application.
<div class="flex gap-6 w-max">
<div class="inline-flex items-center">
<div class="relative inline-block w-8 h-4 rounded-full cursor-pointer">
<input defaultChecked id="switch-1" type="checkbox"
class="absolute w-8 h-4 transition-colors duration-300 rounded-full appearance-none cursor-pointer peer bg-blue-gray-100 checked:bg-blue-500 peer-checked:border-blue-500 peer-checked:before:bg-blue-500" />
<label htmlFor="switch-1"
class="before:content[''] absolute top-2/4 -left-1 h-5 w-5 -translate-y-2/4 cursor-pointer rounded-full border border-blue-gray-100 bg-white shadow-md transition-all duration-300 before:absolute before:top-2/4 before:left-2/4 before:block before:h-10 before:w-10 before:-translate-y-2/4 before:-translate-x-2/4 before:rounded-full before:bg-blue-gray-500 before:opacity-0 before:transition-opacity hover:before:opacity-10 peer-checked:translate-x-full peer-checked:border-blue-500 peer-checked:before:bg-blue-500">
<div class="inline-block p-5 rounded-full top-2/4 left-2/4 -translate-x-2/4 -translate-y-2/4"
data-ripple-dark="true"></div>
</label>
</div>
</div>
<div class="inline-flex items-center">
<div class="relative inline-block w-8 h-4 rounded-full cursor-pointer">
<input defaultChecked id="switch-2" type="checkbox"
class="absolute w-8 h-4 transition-colors duration-300 rounded-full appearance-none cursor-pointer peer bg-blue-gray-100 checked:bg-red-500 peer-checked:border-red-500 peer-checked:before:bg-red-500" />
<label htmlFor="switch-2"
class="before:content[''] absolute top-2/4 -left-1 h-5 w-5 -translate-y-2/4 cursor-pointer rounded-full border border-blue-gray-100 bg-white shadow-md transition-all duration-300 before:absolute before:top-2/4 before:left-2/4 before:block before:h-10 before:w-10 before:-translate-y-2/4 before:-translate-x-2/4 before:rounded-full before:bg-blue-gray-500 before:opacity-0 before:transition-opacity hover:before:opacity-10 peer-checked:translate-x-full peer-checked:border-red-500 peer-checked:before:bg-red-500">
<div class="inline-block p-5 rounded-full top-2/4 left-2/4 -translate-x-2/4 -translate-y-2/4"
data-ripple-dark="true"></div>
</label>
</div>
</div>
<div class="inline-flex items-center">
<div class="relative inline-block w-8 h-4 rounded-full cursor-pointer">
<input defaultChecked id="switch-3" type="checkbox"
class="absolute w-8 h-4 transition-colors duration-300 rounded-full appearance-none cursor-pointer peer bg-blue-gray-100 checked:bg-green-500 peer-checked:border-green-500 peer-checked:before:bg-green-500" />
<label htmlFor="switch-3"
class="before:content[''] absolute top-2/4 -left-1 h-5 w-5 -translate-y-2/4 cursor-pointer rounded-full border border-blue-gray-100 bg-white shadow-md transition-all duration-300 before:absolute before:top-2/4 before:left-2/4 before:block before:h-10 before:w-10 before:-translate-y-2/4 before:-translate-x-2/4 before:rounded-full before:bg-blue-gray-500 before:opacity-0 before:transition-opacity hover:before:opacity-10 peer-checked:translate-x-full peer-checked:border-green-500 peer-checked:before:bg-green-500">
<div class="inline-block p-5 rounded-full top-2/4 left-2/4 -translate-x-2/4 -translate-y-2/4"
data-ripple-dark="true"></div>
</label>
</div>
</div>
<div class="inline-flex items-center">
<div class="relative inline-block w-8 h-4 rounded-full cursor-pointer">
<input defaultChecked id="switch-4" type="checkbox"
class="absolute w-8 h-4 transition-colors duration-300 rounded-full appearance-none cursor-pointer peer bg-blue-gray-100 checked:bg-amber-500 peer-checked:border-amber-500 peer-checked:before:bg-amber-500" />
<label htmlFor="switch-4"
class="before:content[''] absolute top-2/4 -left-1 h-5 w-5 -translate-y-2/4 cursor-pointer rounded-full border border-blue-gray-100 bg-white shadow-md transition-all duration-300 before:absolute before:top-2/4 before:left-2/4 before:block before:h-10 before:w-10 before:-translate-y-2/4 before:-translate-x-2/4 before:rounded-full before:bg-blue-gray-500 before:opacity-0 before:transition-opacity hover:before:opacity-10 peer-checked:translate-x-full peer-checked:border-amber-500 peer-checked:before:bg-amber-500">
<div class="inline-block p-5 rounded-full top-2/4 left-2/4 -translate-x-2/4 -translate-y-2/4"
data-ripple-dark="true"></div>
</label>
</div>
</div>
<div class="inline-flex items-center">
<div class="relative inline-block w-8 h-4 rounded-full cursor-pointer">
<input defaultChecked id="switch-5" type="checkbox"
class="absolute w-8 h-4 transition-colors duration-300 rounded-full appearance-none cursor-pointer peer bg-blue-gray-100 checked:bg-teal-500 peer-checked:border-teal-500 peer-checked:before:bg-teal-500" />
<label htmlFor="switch-5"
class="before:content[''] absolute top-2/4 -left-1 h-5 w-5 -translate-y-2/4 cursor-pointer rounded-full border border-blue-gray-100 bg-white shadow-md transition-all duration-300 before:absolute before:top-2/4 before:left-2/4 before:block before:h-10 before:w-10 before:-translate-y-2/4 before:-translate-x-2/4 before:rounded-full before:bg-blue-gray-500 before:opacity-0 before:transition-opacity hover:before:opacity-10 peer-checked:translate-x-full peer-checked:border-teal-500 peer-checked:before:bg-teal-500">
<div class="inline-block p-5 rounded-full top-2/4 left-2/4 -translate-x-2/4 -translate-y-2/4"
data-ripple-dark="true"></div>
</label>
</div>
</div>
<div class="inline-flex items-center">
<div class="relative inline-block w-8 h-4 rounded-full cursor-pointer">
<input defaultChecked id="switch-6" type="checkbox"
class="absolute w-8 h-4 transition-colors duration-300 rounded-full appearance-none cursor-pointer peer bg-blue-gray-100 checked:bg-indigo-500 peer-checked:border-indigo-500 peer-checked:before:bg-indigo-500" />
<label htmlFor="switch-6"
class="before:content[''] absolute top-2/4 -left-1 h-5 w-5 -translate-y-2/4 cursor-pointer rounded-full border border-blue-gray-100 bg-white shadow-md transition-all duration-300 before:absolute before:top-2/4 before:left-2/4 before:block before:h-10 before:w-10 before:-translate-y-2/4 before:-translate-x-2/4 before:rounded-full before:bg-blue-gray-500 before:opacity-0 before:transition-opacity hover:before:opacity-10 peer-checked:translate-x-full peer-checked:border-indigo-500 peer-checked:before:bg-indigo-500">
<div class="inline-block p-5 rounded-full top-2/4 left-2/4 -translate-x-2/4 -translate-y-2/4"
data-ripple-dark="true"></div>
</label>
</div>
</div>
<div class="inline-flex items-center">
<div class="relative inline-block w-8 h-4 rounded-full cursor-pointer">
<input defaultChecked id="switch-7" type="checkbox"
class="absolute w-8 h-4 transition-colors duration-300 rounded-full appearance-none cursor-pointer peer bg-blue-gray-100 checked:bg-purple-500 peer-checked:border-purple-500 peer-checked:before:bg-purple-500" />
<label htmlFor="switch-7"
class="before:content[''] absolute top-2/4 -left-1 h-5 w-5 -translate-y-2/4 cursor-pointer rounded-full border border-blue-gray-100 bg-white shadow-md transition-all duration-300 before:absolute before:top-2/4 before:left-2/4 before:block before:h-10 before:w-10 before:-translate-y-2/4 before:-translate-x-2/4 before:rounded-full before:bg-blue-gray-500 before:opacity-0 before:transition-opacity hover:before:opacity-10 peer-checked:translate-x-full peer-checked:border-purple-500 peer-checked:before:bg-purple-500">
<div class="inline-block p-5 rounded-full top-2/4 left-2/4 -translate-x-2/4 -translate-y-2/4"
data-ripple-dark="true"></div>
</label>
</div>
</div>
<div class="inline-flex items-center">
<div class="relative inline-block w-8 h-4 rounded-full cursor-pointer">
<input defaultChecked id="switch-8" type="checkbox"
class="absolute w-8 h-4 transition-colors duration-300 rounded-full appearance-none cursor-pointer peer bg-blue-gray-100 checked:bg-pink-500 peer-checked:border-pink-500 peer-checked:before:bg-pink-500" />
<label htmlFor="switch-8"
class="before:content[''] absolute top-2/4 -left-1 h-5 w-5 -translate-y-2/4 cursor-pointer rounded-full border border-blue-gray-100 bg-white shadow-md transition-all duration-300 before:absolute before:top-2/4 before:left-2/4 before:block before:h-10 before:w-10 before:-translate-y-2/4 before:-translate-x-2/4 before:rounded-full before:bg-blue-gray-500 before:opacity-0 before:transition-opacity hover:before:opacity-10 peer-checked:translate-x-full peer-checked:border-pink-500 peer-checked:before:bg-pink-500">
<div class="inline-block p-5 rounded-full top-2/4 left-2/4 -translate-x-2/4 -translate-y-2/4"
data-ripple-dark="true"></div>
</label>
</div>
</div>
</div> See below how to create a custom switch component with a clear, descriptive label, making it suitable for settings pages, forms, or anywhere else where users need to make a binary choice.
<div class="inline-flex items-center">
<div class="relative inline-block w-8 h-4 rounded-full cursor-pointer">
<input id="auto-update" type="checkbox"
class="absolute w-8 h-4 transition-colors duration-300 rounded-full appearance-none cursor-pointer peer bg-blue-gray-100 checked:bg-gray-900 peer-checked:border-gray-900 peer-checked:before:bg-gray-900"
defaultChecked />
<label htmlFor="auto-update"
class="before:content[''] absolute top-2/4 -left-1 h-5 w-5 -translate-y-2/4 cursor-pointer rounded-full border border-blue-gray-100 bg-white shadow-md transition-all duration-300 before:absolute before:top-2/4 before:left-2/4 before:block before:h-10 before:w-10 before:-translate-y-2/4 before:-translate-x-2/4 before:rounded-full before:bg-blue-gray-500 before:opacity-0 before:transition-opacity hover:before:opacity-10 peer-checked:translate-x-full peer-checked:border-gray-900 peer-checked:before:bg-gray-900">
<div class="inline-block p-5 rounded-full top-2/4 left-2/4 -translate-x-2/4 -translate-y-2/4"
data-ripple-dark="true"></div>
</label>
</div>
<label htmlFor="auto-update" class="mt-px mb-0 ml-3 font-light text-gray-700 cursor-pointer select-none">
Automatic Update
</label>
</div> This example showcases a pair of switch components arranged vertically, each designed to toggle the state of a "Ripple Effect" feature, one for turning it on and the other for turning it off.
<div class="flex flex-col gap-6">
<div class="inline-flex items-center">
<div class="relative inline-block w-8 h-4 rounded-full cursor-pointer">
<input id="ripple-on" type="checkbox"
class="absolute w-8 h-4 transition-colors duration-300 rounded-full appearance-none cursor-pointer peer bg-blue-gray-100 checked:bg-gray-900 peer-checked:border-gray-900 peer-checked:before:bg-gray-900" />
<label htmlFor="ripple-on"
class="before:content[''] absolute top-2/4 -left-1 h-5 w-5 -translate-y-2/4 cursor-pointer rounded-full border border-blue-gray-100 bg-white shadow-md transition-all duration-300 before:absolute before:top-2/4 before:left-2/4 before:block before:h-10 before:w-10 before:-translate-y-2/4 before:-translate-x-2/4 before:rounded-full before:bg-blue-gray-500 before:opacity-0 before:transition-opacity hover:before:opacity-10 peer-checked:translate-x-full peer-checked:border-gray-900 peer-checked:before:bg-gray-900">
<div class="inline-block p-5 rounded-full top-2/4 left-2/4 -translate-x-2/4 -translate-y-2/4"
data-ripple-dark="true"></div>
</label>
</div>
<label htmlFor="ripple-on" class="mt-px mb-0 ml-3 font-light text-gray-700 cursor-pointer select-none">
Ripple Effect On
</label>
</div>
<div class="inline-flex items-center">
<div class="relative inline-block w-8 h-4 rounded-full cursor-pointer">
<input id="ripple-off" type="checkbox"
class="absolute w-8 h-4 transition-colors duration-300 rounded-full appearance-none cursor-pointer peer bg-blue-gray-100 checked:bg-gray-900 peer-checked:border-gray-900 peer-checked:before:bg-gray-900" />
<label htmlFor="ripple-off"
class="before:content[''] absolute top-2/4 -left-1 h-5 w-5 -translate-y-2/4 cursor-pointer rounded-full border border-blue-gray-100 bg-white shadow-md transition-all duration-300 before:absolute before:top-2/4 before:left-2/4 before:block before:h-10 before:w-10 before:-translate-y-2/4 before:-translate-x-2/4 before:rounded-full before:bg-blue-gray-500 before:opacity-0 before:transition-opacity hover:before:opacity-10 peer-checked:translate-x-full peer-checked:border-gray-900 peer-checked:before:bg-gray-900"></label>
</div>
<label htmlFor="ripple-off" class="mt-px mb-0 ml-3 font-light text-gray-700 cursor-pointer select-none">
Ripple Effect Off
</label>
</div>
</div> This example illustrates a switch component designed to appear disabled and non-interactive. The key features indicating its disabled state include the use of the disabled attribute on the input element, as well as Tailwind CSS classes opacity-50 and pointer-events-none applied to the parent div to visually and functionally disable the entire switch component.
<div class="inline-flex items-center opacity-50 pointer-events-none">
<div class="relative inline-block w-8 h-4 rounded-full cursor-pointer">
<input type="checkbox" disabled id="disable"
class="absolute w-8 h-4 transition-colors duration-300 rounded-full appearance-none cursor-pointer peer bg-blue-gray-100 checked:bg-gray-900 peer-checked:border-gray-900 peer-checked:before:bg-gray-900" />
<label htmlFor="disable"
class="before:content[''] absolute top-2/4 -left-1 h-5 w-5 -translate-y-2/4 cursor-pointer rounded-full border border-blue-gray-100 bg-white shadow-md transition-all duration-300 before:absolute before:top-2/4 before:left-2/4 before:block before:h-10 before:w-10 before:-translate-y-2/4 before:-translate-x-2/4 before:rounded-full before:bg-blue-gray-500 before:opacity-0 before:transition-opacity hover:before:opacity-10 peer-checked:translate-x-full peer-checked:border-gray-900 peer-checked:before:bg-gray-900">
<div class="inline-block p-5 rounded-full top-2/4 left-2/4 -translate-x-2/4 -translate-y-2/4"></div>
</label>
</div>
</div>A switch component like the "Remember Me" example below is typically used in login forms or authentication pages on websites and applications.
<div class="inline-flex items-center">
<div class="relative inline-block w-8 h-4 -mt-5 rounded-full cursor-pointer">
<input type="checkbox" id="desc"
class="absolute w-8 h-4 transition-colors duration-300 rounded-full appearance-none cursor-pointer peer bg-blue-gray-100 checked:bg-gray-900 peer-checked:border-gray-900 peer-checked:before:bg-gray-900" />
<label htmlFor="desc"
class="before:content[''] absolute top-2/4 -left-1 h-5 w-5 -translate-y-2/4 cursor-pointer rounded-full border border-blue-gray-100 bg-white shadow-md transition-all duration-300 before:absolute before:top-2/4 before:left-2/4 before:block before:h-10 before:w-10 before:-translate-y-2/4 before:-translate-x-2/4 before:rounded-full before:bg-blue-gray-500 before:opacity-0 before:transition-opacity hover:before:opacity-10 peer-checked:translate-x-full peer-checked:border-gray-900 peer-checked:before:bg-gray-900">
<div class="inline-block p-5 rounded-full top-2/4 left-2/4 -translate-x-2/4 -translate-y-2/4"></div>
</label>
</div>
<label htmlFor="desc" class="mt-px mb-0 ml-3 font-light text-gray-700 cursor-pointer select-none">
<div>
<p class="block font-sans text-base antialiased font-medium leading-relaxed text-blue-gray-900">
Remember Me
</p>
<p class="block font-sans text-sm antialiased font-normal leading-normal text-gray-700">
You'll be able to login without password for 24 hours.
</p>
</div>
</label>
</div>Check out this example to see how you can implement custom styles to your switch component.
<div class="inline-flex items-center">
<div class="relative inline-block w-8 h-4 rounded-full cursor-pointer">
<input id="switch-component" type="checkbox"
class="absolute w-8 h-4 transition-colors duration-300 rounded-full appearance-none cursor-pointer peer bg-blue-gray-100 checked:bg-gray-900 peer-checked:border-gray-900 peer-checked:before:bg-gray-900"
disabled />
<label htmlFor="switch-component"
class="before:content[''] absolute top-2/4 -left-1 h-5 w-5 -translate-y-2/4 cursor-pointer rounded-full border border-blue-gray-100 bg-white shadow-md transition-all duration-300 before:absolute before:top-2/4 before:left-2/4 before:block before:h-10 before:w-10 before:-translate-y-2/4 before:-translate-x-2/4 before:rounded-full before:bg-blue-gray-500 before:opacity-0 before:transition-opacity hover:before:opacity-10 peer-checked:translate-x-full peer-checked:border-gray-900 peer-checked:before:bg-gray-900">
<div class="inline-block p-5 rounded-full top-2/4 left-2/4 -translate-x-2/4 -translate-y-2/4"
data-ripple-dark="true"></div>
</label>
</div>
</div>The switch component needs a required script file for ripple effect to work, you just need to add the below script file to the bottom of your html file.
<!-- from node_modules -->
<script src="node_modules/@material-tailwind/html@latest/scripts/ripple.js"></script>
<!-- from cdn -->
<script src="https://unpkg.com/@material-tailwind/html@latest/scripts/ripple.js"></script>