<!-- Form group -->
<div class="flex items-center gap-x-2 group/input">
    <!-- Toggle field -->
    <input type="checkbox" id="auto-update" class="sr-only" />
    <div
        class="relative w-11 h-6 bg-muted rounded-full cursor-pointer after:content-[''] after:absolute after:top-0.5 after:start-0.5 after:size-5 after:bg-background after:rounded-full after:shadow after:transition-transform peer-focus/input:outline-none group-has-checked/input:bg-primary group-has-checked/input:after:translate-x-full rtl:group-has-checked/input:after:-translate-x-full group-has-checked/input:after:bg-primary-foreground group-has-disabled/input:cursor-default group-has-disabled/input:after:opacity-45">
    </div>
    <!-- Input label -->
    <label for="auto-update"
        class="font-semibold text-xs text-muted-foreground cursor-pointer select-none transition-colors group-has-checked/input:text-foreground group-has-disabled/input:cursor-default">بروزرسانی
        خودکار</label>
</div>
<!-- end Form group -->