Basic Select

<PrimerSelect @bind-Value="selectedOption" Size="SelectSize.Small">
    <PrimerSelectOption value="">Please select</PrimerSelectOption>
    <PrimerSelectOption value="one">Choice one</PrimerSelectOption>
    <PrimerSelectOption value="two">Choice two</PrimerSelectOption>
    <PrimerSelectOption value="three">Choice three</PrimerSelectOption>
    <PrimerSelectOption value="four">Choice four</PrimerSelectOption>
    <PrimerSelectOption value="five">Choice five</PrimerSelectOption>
</PrimerSelect>

Grouped Select

<PrimerSelectGroup Size="SelectSize.Small">
    <PrimerSelectGroupItem Level="0" Options="@ContinentOptions" Value="@SelectedContinent" ValueChanged="@OnContinentChanged" />
    <PrimerSelectGroupItem Level="1" Options="@CountryOptions" @bind-Value="SelectedCountry" />
    <PrimerSelectGroupItem Level="2" Options="@GetCities(SelectedCountry)" @bind-Value="SelectedCity" />
</PrimerSelectGroup>

Select Options

Available options for Select component

NameDescriptionDefault ValueCSS Class
Value
Selected option value
-
-
Disabled
Disable the select
false
-
Size
Size of the select (Small, Medium, Large)
Medium
-
ClassName
Additional custom classes
-
-
private string selectedOption = "";

private List<SelectOption> ContinentOptions = new()
{
    new() { Value = "asia", Text = "Asia" },
    new() { Value = "europe", Text = "Europe" }
};

private string SelectedContinent;
private string SelectedCountry;
private string SelectedCity;

private List<SelectOption> GetCountries(string continent)
{
    return continent switch
    {
        "asia" => new() { new("kr", "Korea"), new("jp", "Japan") },
        "europe" => new() { new("fr", "France"), new("de", "Germany") },
        _ => new()
    };
}

private List<SelectOption> GetCities(string country)
{
    return country switch
    {
        "kr" => new() { new("seoul", "Seoul"), new("busan", "Busan") },
        "jp" => new() { new("tokyo", "Tokyo"), new("osaka", "Osaka") },
        "fr" => new() { new("paris", "Paris"), new("lyon", "Lyon") },
        "de" => new() { new("berlin", "Berlin"), new("munich", "Munich") },
        _ => new()
    };
}

private List<SelectOption> CountryOptions = new();

private async Task OnContinentChanged(string newValue)
{
    SelectedContinent = newValue;
    SelectedCountry = null;
    SelectedCity = null;

    CountryOptions = await LoadCountriesAsync(newValue);
    StateHasChanged();
}

private async Task<List<SelectOption>> LoadCountriesAsync(string continent)
{
    await Task.Delay(300);
    return GetCountries(continent);
}