<!-- Form group -->
<div class="grid gap-y-3.5">
    <!-- Title -->
    <span class="font-semibold text-xs select-none">
        نوع حساب کاربری:
    </span>
    <!-- ًRadio group options container -->
    <div class="flex flex-col items-start space-y-3">
        <!-- ًRadio option -->
        <div class="flex items-center gap-x-2 group/input">
            <input type="radio" id="personal" name="type"
                class="relative size-4 appearance-none bg-background border rounded-full cursor-pointer before:absolute before:inset-1 before:bg-background before:rounded-full not-checked:before:hidden checked:border-accent checked:bg-accent disabled:bg-muted disabled:before:bg-border disabled:cursor-default forced-colors:appearance-auto forced-colors:before:hidden" />
            <label for="personal"
                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 ًRadio option -->

        <!-- ًRadio option -->
        <div class="flex items-center gap-x-2 group/input">
            <input type="radio" id="business" name="type"
                class="relative size-4 appearance-none bg-background border rounded-full cursor-pointer before:absolute before:inset-1 before:bg-background before:rounded-full not-checked:before:hidden checked:border-accent checked:bg-accent disabled:bg-muted disabled:before:bg-border disabled:cursor-default forced-colors:appearance-auto forced-colors:before:hidden" />
            <label for="business"
                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 ًRadio option -->

        <!-- ًRadio option -->
        <div class="flex items-center gap-x-2 group/input">
            <input type="radio" id="student" name="type"
                class="relative size-4 appearance-none bg-background border rounded-full cursor-pointer before:absolute before:inset-1 before:bg-background before:rounded-full not-checked:before:hidden checked:border-accent checked:bg-accent disabled:bg-muted disabled:before:bg-border disabled:cursor-default forced-colors:appearance-auto forced-colors:before:hidden" />
            <label for="student"
                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 ًRadio option -->
    </div>
    <!-- ًRadio group options container -->
</div>
<!-- end Form group -->