Tailwind CSS Switch

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.

Use the following example to create a simple and easy-to-use switch component for your Tailwind CSS project.

<div class="form-check form-switch mb-4 flex items-center">
    class="absolute z-10 h-5 w-8 cursor-pointer opacity-0"
  <div class="form-check-input"></div>
    class="form-check-label mb-0 ml-2 cursor-pointer select-none"
    >Remember me</label

Required Scrips

The switch/toggle component needs a required script files 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/scripts/toggle.js"></script>
<!-- from cdn -->
<script src="https://unpkg.com/@material-tailwind/[email protected]/scripts/toggle.js"></script>
Edit this page on Github