Blazorise Select component

Let users choose one or more values from a list of options.

Use the Select component when users need to choose from a defined set of values. Related options can be grouped to make longer lists easier to scan.

Structure

A Select contains SelectItem options directly or inside a SelectGroup.

<Select>The selection input.
- <SelectItem>One selectable option.
- <SelectGroup>An optional group of related options.
  - <SelectItem>An option within the group.

Select and SelectItem are generic components and they support all of the basic value types line int, string, enum, etc. Nullable types are also supported. Since they are generic component they also come with some special rules that must be followed:

Value type must be known. When using member variable on bind-* or Value attributes, the value type will be recognized automatically. Otherwise you must use TValue to define it eg (TValue=”int”).
Value type must be the same in both Select and SelectItem.
String values must be defined with special syntax eg. @("hello"), see #7785

Note: When dealing with a TValue of an enum type, you should be mindfull of your javascript serializer settings. As that will affect the correct handling of this type by the Select as it will need to javascript interop the enum value as a string. Applying the attribute [JsonConverter(typeof(System.Text.Json.Serialization.JsonStringEnumConverter))] to your enum should allow it to be properly bound.

Examples

Basic

<Field>
    <Select TValue="int">
        <SelectItem Value="1">One</SelectItem>
        <SelectItem Value="2">Two</SelectItem>
        <SelectItem Value="3">Three</SelectItem>
        <SelectItem Value="4">Four</SelectItem>
    </Select>
</Field>

Multiple

By changing the enumerable type on the TValue, and by enabling the Multiple parameter, you will be able to select more than one option.

<Field>
    <Select TValue="int[]" Multiple>
        <SelectItem Value="1">One</SelectItem>
        <SelectItem Value="2">Two</SelectItem>
        <SelectItem Value="3">Three</SelectItem>
        <SelectItem Value="4">Four</SelectItem>
    </Select>
</Field>

Groups

You can also group items into categories for better user experience.

<Field>
    <Select TValue="int">
        <SelectGroup Label="Group 1">
            <SelectItem Value="1">One</SelectItem>
            <SelectItem Value="2">Two</SelectItem>
        </SelectGroup>
        <SelectGroup Label="Group 2">
            <SelectItem Value="3">Three</SelectItem>
            <SelectItem Value="4">Four</SelectItem>
        </SelectGroup>
    </Select>
</Field>

Binding

The process is basically the same for the single and for multiple select.

Note: The Value attribute is required on the SelectItem. Otherwise the Select will not behave as expected.

Two-way binding

By using bind-* attribute the selected item value will be automatically assigned to the member variable.

<Field>
    <Select @bind-Value="@selectedValue">
        <SelectItem Value="1">One</SelectItem>
        <SelectItem Value="2">Two</SelectItem>
        <SelectItem Value="3">Three</SelectItem>
        <SelectItem Value="4">Four</SelectItem>
    </Select>
</Field>

@code{
    int selectedValue;
}

Manual event binding

When using the event ValueChanged, you also must define the Value attribute.

<Field>
    <Select TValue="int" Value="@selectedValue" ValueChanged="@OnSelectedValueChanged">
        <SelectItem Value="1">One</SelectItem>
        <SelectItem Value="2">Two</SelectItem>
        <SelectItem Value="3">Three</SelectItem>
        <SelectItem Value="4">Four</SelectItem>
    </Select>
</Field>

@code{
    int selectedValue;

    Task OnSelectedValueChanged( int value )
    {
        selectedValue = value;
        Console.WriteLine( selectedValue );

        return Task.CompletedTask;
    }
}

Best Practices

Default Value

When applicable, set the most common choice as the default value.

Not a Menu

Select is an input field component, not a generic menu component. Use Dropdown to create overlays for actions.

API

See the API reference for the parameters, events, methods, and related types available to the components covered on this page.