انتخاب چندگانه

<!-- Notice -->
<div class="grid gap-y-3.5">
    <span class="font-semibold text-xs">
        چطور به شما اطلاع دهیم؟
    </span>

    <!-- Checkbox options container -->
    <div class="space-y-3">
        <!-- Checkbox option -->
        <label class="flex items-center gap-x-2 group/input">
            <span class="shrink-0 grid grid-cols-1 size-4">
                <input type="checkbox" name="notices" id="notices01"
                    class="col-start-1 row-start-1 appearance-none size-4 bg-surface border rounded-sm checked:border-blue-500 checked:bg-blue-500 disabled:bg-surface-content/10 disabled:checked:bg-surface-content/10 disabled:checked:border-surface-content/10 transition-colors duration-200 ease-in-out"
                    value="email" />
                <svg class="col-start-1 row-start-1 size-4 stroke-surface cursor-pointer group-has-checked/input:stroke-accent-foreground group-has-disabled/input:cursor-not-allowed group-has-disabled/input:stroke-surface-content/30"
                    viewBox="0 0 14 14" fill="none">
                    <path class="opacity-0 group-has-checked/input:opacity-100 transition-opacity ease-out"
                        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 transition-opacity ease-out"
                        stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                </svg>
            </span>
            <span
                class="grow 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>
        <!-- end Checkbox option -->

        <!-- Checkbox option -->
        <label class="flex items-center gap-x-2 group/input">
            <span class="shrink-0 grid grid-cols-1 size-4">
                <input type="checkbox" name="notices" id="notices02"
                    class="col-start-1 row-start-1 appearance-none size-4 bg-surface border rounded-sm checked:border-blue-500 checked:bg-blue-500 disabled:bg-surface-content/10 disabled:checked:bg-surface-content/10 disabled:checked:border-surface-content/10 transition-colors duration-200 ease-in-out"
                    value="sms" />
                <svg class="col-start-1 row-start-1 size-4 stroke-surface cursor-pointer group-has-checked/input:stroke-accent-foreground group-has-disabled/input:cursor-not-allowed group-has-disabled/input:stroke-surface-content/30"
                    viewBox="0 0 14 14" fill="none">
                    <path class="opacity-0 group-has-checked/input:opacity-100 transition-opacity ease-out"
                        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 transition-opacity ease-out"
                        stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                </svg>
            </span>
            <span
                class="grow 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>
        <!-- end Checkbox option -->

        <!-- Checkbox option -->
        <label class="flex items-center gap-x-2 group/input">
            <span class="shrink-0 grid grid-cols-1 size-4">
                <input type="checkbox" name="notices" id="notices03"
                    class="col-start-1 row-start-1 appearance-none size-4 bg-surface border rounded-sm checked:border-blue-500 checked:bg-blue-500 disabled:bg-surface-content/10 disabled:checked:bg-surface-content/10 disabled:checked:border-surface-content/10 transition-colors duration-200 ease-in-out"
                    value="in-app" />
                <svg class="col-start-1 row-start-1 size-4 stroke-surface cursor-pointer group-has-checked/input:stroke-accent-foreground group-has-disabled/input:cursor-not-allowed group-has-disabled/input:stroke-surface-content/30"
                    viewBox="0 0 14 14" fill="none">
                    <path class="opacity-0 group-has-checked/input:opacity-100 transition-opacity ease-out"
                        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 transition-opacity ease-out"
                        stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                </svg>
            </span>
            <span
                class="grow 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>
        <!-- end Checkbox option -->
    </div>
    <!-- end Checkbox options container -->
</div>