Switch with SVG and AlpineJS

switch-svg.html

<label x-data="{ open: true }" for="switch" class="mt-8 flex items-center">
  <input id="switch" name="switch" type="checkbox" x-model="open" class="hidden">
  <svg x-on:click="open = !open" class="text-orange-500 mr-2" width="40" height="24" aria-hidden="true">
    <rect x="4" y="4" width="32" height="16" rx="8" x-bind:fill="open ? 'currentColor' : 'gray'"></rect>
    <circle x-bind:cx="open ? '28' : '12'" cy="12" r="6" fill="white"></circle>
    <rect x="1" y="1" width="38" height="22" rx="11" fill="none" stroke="currentColor" stroke-width="2"></rect>
  </svg>
  Switch
</label>