Select

@using System.ComponentModel.DataAnnotations

<Form Model="Model" FormName="options" MaxWidth="24.Rem" Grow>
    @* An enum: its values are the options, named by [Display(Name)]. *@
    <Select @bind-Value="Model!.Plan" />
    @* A list of your own, with the text for each. *@
    <Select @bind-Value="Model!.Country" Items="Countries.Keys" ItemText="code => Countries[code!]"
            Placeholder="Choose a country" />
</Form>

@code {
    [SupplyParameterFromForm(FormName = "options")]
    private Signup? Model { get; set; }

    private static readonly Dictionary<string, string> Countries = new()
    {
        ["CA"] = "Canada", ["MX"] = "Mexico", ["GB"] = "United Kingdom", ["US"] = "United States",
    };

    protected override void OnInitialized() => Model ??= new();

    public sealed class Signup
    {
        public Plan Plan { get; set; } = Plan.Pro;

        // A country code: "CA", "MX", ...
        public string? Country { get; set; }
    }

    public enum Plan
    {
        Free,
        Pro,
        [Display(Name = "Team (5 seats)")] Team,
    }
}

<Form Model="Model" FormName="rich" MaxWidth="24.Rem" Grow>
    <Select @bind-Value="Model!.Plan" ItemText="plan => plan.ToString()">
        <ItemTemplate>
            <Icon Name="@Icons[context]" />
            <span>@context</span>
            <small class="ib-option-hint">@Prices[context]</small>
        </ItemTemplate>
    </Select>
</Form>

@code {
    [SupplyParameterFromForm(FormName = "rich")]
    private Signup? Model { get; set; }

    private static readonly Dictionary<Plan, IconData> Icons = new()
    {
        [Plan.Free] = Lucide.Leaf, [Plan.Pro] = Lucide.Rocket, [Plan.Team] = Lucide.Users,
    };

    private static readonly Dictionary<Plan, string> Prices = new()
    {
        [Plan.Free] = "$0", [Plan.Pro] = "$12 a month", [Plan.Team] = "$40 a month",
    };

    protected override void OnInitialized() => Model ??= new();

    public sealed class Signup
    {
        public Plan Plan { get; set; } = Plan.Pro;
    }

    public enum Plan { Free, Pro, Team }
}

@using System.ComponentModel.DataAnnotations

<Form Model="Model" FormName="required" OnValidSubmit="Save" MaxWidth="24.Rem" Grow>
    <Select @bind-Value="Model!.Plan" Placeholder="Choose a plan" />
    <Row><Button Submit>Continue</Button></Row>
    @if (_saved)
    {
        <Alert Status="Status.Success">You chose @Model!.Plan.</Alert>
    }
</Form>

@code {
    [SupplyParameterFromForm(FormName = "required")]
    private Signup? Model { get; set; }

    private bool _saved;

    protected override void OnInitialized() => Model ??= new();

    private void Save() => _saved = true;

    public sealed class Signup
    {
        // Nullable, so nothing is chosen until someone picks one.
        [Required(ErrorMessage = "Choose a plan")]
        public Plan? Plan { get; set; }
    }

    public enum Plan { Free, Pro, Team }
}

<Form Model="Model" FormName="select-states" MaxWidth="24.Rem" Grow>
    <Select @bind-Value="Model!.Small" Label="Small" Size="ControlSize.Sm" />
    <Select @bind-Value="Model!.Large" Label="Large" Size="ControlSize.Lg" />
    <Select @bind-Value="Model!.Region" Label="Region" ReadOnly Hint="Read-only: posted, but can't be changed." />
    <Select @bind-Value="Model!.Backup" Label="Backup region" Disabled Hint="Disabled: not posted." />
</Form>

@code {
    [SupplyParameterFromForm(FormName = "select-states")]
    private Settings? Model { get; set; }

    protected override void OnInitialized() => Model ??= new();

    public sealed class Settings
    {
        public Region Small { get; set; }
        public Region Large { get; set; }
        public Region Region { get; set; } = Region.Europe;
        public Region Backup { get; set; } = Region.Asia;
    }

    public enum Region { Americas, Europe, Asia }
}