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">
  <input
    class="absolute z-10 h-5 w-8 cursor-pointer opacity-0"
    data-attribute="toggle"
    id="remember"
  />
  <div class="form-check-input"></div>
  <label
    class="form-check-label mb-0 ml-2 cursor-pointer select-none"
    for="remember"
    >Remember me</label
  >
</div>

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.

<script src="node_modules/@material-tailwind/html/scripts/toggle.js"></script>