Slide Toggle

<label class="c-slide-toggle" ui-slide-toggle="{{ target }}">
  <span>{{ label }}</span>
  <div class="inline-flex items-center cursor-pointer">

    <input
      {% if enabled %}
        checked
      {% endif %}

      type="checkbox"
      class="sr-only peer"
    >

    <div class="
      relative
      shrink-0
      w-16 h-9
      rounded-full
      
      bg-neutral-grey-01

      peer
      peer-focus:outline-none
      peer-focus:ring-2
      peer-focus:ring-neutral-grey-04
      
      peer-checked:after:translate-x-full
      peer-checked:after:border-white
      
      after:absolute
      after:content-['']
      after:top-[3px]
      after:start-[3px]
      after:border-gray-300
      after:border
      after:rounded-full
      after:h-[16px] after:w-[16px]
      
      after:bg-neutral-white
      after:transition-all
      
      peer-checked:bg-brand-hhnavy"></div>
  </div>
</label>