روشن/خاموش

<!-- Toggle -->
<label for="auto-update" class="flex items-center gap-x-2 group/input">
    <span class="relative inline-flex h-5 w-9 shrink-0 cursor-pointer focus:outline-hidden">
        <input type="checkbox" id="auto-update" class="sr-only" />
        <span
            class="absolute inset-0 bg-surface-content/10 border-2 border-transparent rounded-full group-has-checked/input:bg-blue-500 transition-colors duration-200 ease-in-out after:pointer-events-none after:inline-block after:size-4 after:translate-x-0 rtl:after:-translate-x-4 after:transform after:rounded-full after:bg-surface after:ring-0 after:shadow-sm after:transition after:duration-200 after:ease-in-out group-has-checked/input:after:translate-x-4 rtl:group-has-checked/input:after:translate-x-0 dark:group-has-checked/input:after:bg-white">
        </span>
    </span>
    <!-- Input label -->
    <span
        class="font-semibold text-xs text-surface-2-content cursor-pointer select-none transition-colors group-has-checked/input:text-surface-content group-has-disabled/input:cursor-default">
        بروزرسانی خودکار
    </span>
</label>