AlpineJS Progressively Enhanced Checkbox

alpine-toggle.js

<div x-data="{ checked: false, ready: false }" x-init="ready = true" @click="checked = !checked" class="flex items-center space-x-2">
    <button type="button" class="hidden" :class="{ 'flex bg-gray-300 rounded-full w-12 cursor-pointer border': ready, 'hidden': !ready }">
        <div :class="{ 'bg-green-600 translate-x-6': checked, 'bg-gray-500': !checked }" class="pointer-events-none rounded-full w-6 h-6 transition duration-150 ease-in-out transform"></div>
    </button>
    <label class="flex items-center" for="remember_me">
      <input :class="{ 'hidden': ready }" class="mr-2" type="checkbox" name="remember_me" x-bind:checked="checked">
      <span>Remember Me</span>
    </label>
</div>

Progressively Enhanced AlpineJS Checkbox

Here's a Checkbox/Toggle input I made for a project I'm working on. I want the fancy toggle switch but I also give a shit about things working well. So using AlpineJS, I built a checkbox that will be a simple checkbox with no JS or if Alpine isn't supported in the that browser but will turn into a Toggle in the browsers it can.

I've used a button for the toggle itself, so I believe it should be accessible. That said, I'm always looking to learn more and will gladly take your feedback!