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.

Remember me

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