گزینه‌های انتخابی

<!-- Account type -->
<div class="grid gap-y-3.5">
    <span class="font-semibold text-xs">
        نوع حساب کاربری:
    </span>

    <!-- Radio group options container -->
    <div class="space-y-3">
        <!-- Radio option -->
        <label class="flex items-center gap-x-2 group/input">
            <input type="radio" name="type" id="personal"
                class="relative size-4 appearance-none bg-surface border rounded-full cursor-pointer before:absolute before:inset-1 before:bg-surface before:rounded-full not-checked:before:hidden checked:border-blue-500 checked:bg-blue-500 disabled:bg-surface-1 disabled:before:bg-surface-content/10 disabled:cursor-default disabled:checked:bg-surface-content/10 disabled:checked:border-surface-content/10 forced-colors:appearance-auto forced-colors:before:hidden"
                value="personal" />
            <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 group-has-disabled/input:text-surface-2-content/80 group-has-disabled/input:group-has-checked/input:text-surface-content/75">
                شخصی
            </span>
        </label>
        <!-- end Radio option -->

        <!-- Radio option -->
        <label class="flex items-center gap-x-2 group/input">
            <input type="radio" name="type" id="business"
                class="relative size-4 appearance-none bg-surface border rounded-full cursor-pointer before:absolute before:inset-1 before:bg-surface before:rounded-full not-checked:before:hidden checked:border-blue-500 checked:bg-blue-500 disabled:bg-surface-1 disabled:before:bg-surface-content/10 disabled:cursor-default disabled:checked:bg-surface-content/10 disabled:checked:border-surface-content/10 forced-colors:appearance-auto forced-colors:before:hidden"
                value="business" />
            <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 group-has-disabled/input:text-surface-2-content/80 group-has-disabled/input:group-has-checked/input:text-surface-content/75">
                تجاری
            </span>
        </label>
        <!-- end Radio option -->

        <!-- Radio option -->
        <label class="flex items-center gap-x-2 group/input">
            <input type="radio" name="type" id="student"
                class="relative size-4 appearance-none bg-surface border rounded-full cursor-pointer before:absolute before:inset-1 before:bg-surface before:rounded-full not-checked:before:hidden checked:border-blue-500 checked:bg-blue-500 disabled:bg-surface-1 disabled:before:bg-surface-content/10 disabled:cursor-default disabled:checked:bg-surface-content/10 disabled:checked:border-surface-content/10 forced-colors:appearance-auto forced-colors:before:hidden"
                value="student" />
            <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 group-has-disabled/input:text-surface-2-content/80 group-has-disabled/input:group-has-checked/input:text-surface-content/75">
                دانشجویی
            </span>
        </label>
        <!-- end Radio option -->
    </div>
    <!-- end Radio group options container -->
</div>