<label class="relative flex gap-4 items-center text-sm cursor-pointer">
    <input type="checkbox" {% if on %}checked{% endif %} name="{{ name }}" id="{{ name }}"
        class="absolute left-1/2 -translate-x-1/2 w-1/2 h-1/2 peer appearance-none rounded-md" />
    <span
        class="{{ colors.toggle }} w-8 h-5 flex items-center flex-shrink-0 p-1 rounded-full duration-300 ease-in-out after:w-4 after:h-4 after:rounded-full after:shadow-md after:duration-300 peer-checked:after:translate-x-3"></span>
    <div class="whitespace-nowrap">{{ label }}</div>
</label>