<!-- Form group -->
<div class="grid gap-y-3.5">
    <!-- Title -->
    <span class="font-semibold text-xs select-none">
        چطور به شما اطلاع دهیم؟
    </span>
    <!-- Checkbox options container -->
    <div class="space-y-3">
        <!-- Checkbox option -->
        <div class="flex items-center gap-x-2 group/input">
            <div class="shrink-0 grid grid-cols-1 size-4">
                <input type="checkbox" name="notices" id="notice01"
                    class="col-start-1 row-start-1 appearance-none size-4 bg-background border rounded-sm checked:border-accent checked:bg-accent disabled:bg-muted disabled:checked:bg-muted"
                    value="email" />
                <svg class="col-start-1 row-start-1 size-4 stroke-background cursor-pointer group-has-checked/input:stroke-accent-foreground group-has-disabled/input:cursor-default group-has-disabled/input:stroke-border"
                    viewBox="0 0 14 14" fill="none">
                    <path class="opacity-0 group-has-checked/input:opacity-100" d="M3 8L6 11L11 3.5" stroke-width="2"
                        stroke-linecap="round" stroke-linejoin="round" />
                    <path class="opacity-0 group-has-checked/input:opacity-100" stroke-width="2" stroke-linecap="round"
                        stroke-linejoin="round" />
                </svg>
            </div>
            <label for="notice01"
                class="grow font-medium 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 Checkbox option -->

        <!-- Checkbox option -->
        <div class="flex items-center gap-x-2 group/input">
            <div class="shrink-0 grid grid-cols-1 size-4">
                <input type="checkbox" name="notices" id="notice02"
                    class="col-start-1 row-start-1 appearance-none size-4 bg-background border rounded-sm checked:border-accent checked:bg-accent disabled:bg-muted disabled:checked:bg-muted"
                    value="sms" />
                <svg class="col-start-1 row-start-1 size-4 stroke-background cursor-pointer group-has-checked/input:stroke-accent-foreground group-has-disabled/input:cursor-default group-has-disabled/input:stroke-border"
                    viewBox="0 0 14 14" fill="none">
                    <path class="opacity-0 group-has-checked/input:opacity-100" d="M3 8L6 11L11 3.5" stroke-width="2"
                        stroke-linecap="round" stroke-linejoin="round" />
                    <path class="opacity-0 group-has-checked/input:opacity-100" stroke-width="2" stroke-linecap="round"
                        stroke-linejoin="round" />
                </svg>
            </div>
            <label for="notice02"
                class="grow font-medium 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 Checkbox option -->

        <!-- Checkbox option -->
        <div class="flex items-center gap-x-2 group/input">
            <div class="shrink-0 grid grid-cols-1 size-4">
                <input type="checkbox" name="notices" id="notice03"
                    class="col-start-1 row-start-1 appearance-none size-4 bg-background border rounded-sm checked:border-accent checked:bg-accent disabled:bg-muted disabled:checked:bg-muted"
                    value="in-app" />
                <svg class="col-start-1 row-start-1 size-4 stroke-background cursor-pointer group-has-checked/input:stroke-accent-foreground group-has-disabled/input:cursor-default group-has-disabled/input:stroke-border"
                    viewBox="0 0 14 14" fill="none">
                    <path class="opacity-0 group-has-checked/input:opacity-100" d="M3 8L6 11L11 3.5" stroke-width="2"
                        stroke-linecap="round" stroke-linejoin="round" />
                    <path class="opacity-0 group-has-checked/input:opacity-100" stroke-width="2" stroke-linecap="round"
                        stroke-linejoin="round" />
                </svg>
            </div>
            <label for="notice03"
                class="grow font-medium 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 Checkbox option -->
    </div>
    <!-- end Checkbox options container -->
</div>
<!-- end Form group -->