Toggle without JavaScript and native input field

[voidmain]

I was originally using the Tailwind UI toggle's but I realized that there was a simpler way to create a toggle without JavaScript and using native input fields. It's pretty slick so I thought I would share. My solution positions the checkbox, pin, and rail as absolutely positioned elements inside a <label>.

<label class="cursor-default flex-shrink-0 group h-5 inline-flex items-center justify-center relative w-10">
  <input type="checkbox" class="peer absolute border-none h-5 rounded w-10 checked:border-0 checked:bg-transparent checked:focus:bg-transparent checked:hover:bg-transparent focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500" name="foo" value="bar">
  <span class="peer-checked:bg-blue-500 absolute bg-gray-200 duration-200 ease-in-out h-4 mx-auto pointer-events-none rounded-full transition-colors w-9"></span>
  <span class="peer-checked:translate-x-5 absolute bg-white border border-gray-200 duration-200 ease-in-out h-5 inline-block left-0 pointer-events-none ring-0 rounded-full shadow transform transition-transform translate-x-0 w-5 "></span>
</label>

I removed the aria attributes and the <span> for screen-readers, but those could easily be added back in. The key is that this requires that all the element be inside the <label> so that it can be used to check the checkbox since that element isn't always clickable. Plus, it uses peer to apply the changes when the checkbox is checked.

Getting the focus to work took a bit of work but I found that making the checkbox itself the full width and height of the toggle and then styling it down to nothing (borders, etc) worked well and didn't get in the way of the other elements due to document order z-index stacking but it did allow the ring to expand around the toggle.

Feel free to give it a shot and hit me up with any questions.

[jenstornell]

Nice work! I tried it out in Tailwind Play but I set the input field to hidden.

https://play.tailwindcss.com/Wtm4hNMojI