Blazorise Select component

Selects allow you to choose one or more items from a dropdown menu.

<Select> components are used for collecting user provided information from a list of options.

Structure

• <Select>
  • <SelectItem>
  • <SelectGroup> Optional tag used to group select items

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 SelectedValue 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

Examples

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

<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>

<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>

Binding

The process is basically the same for the single and for multiple select. The only difference is that SelectedValue attribute is used for single select mode, and SelectedValues attribute is used for multi-selection. Keep in mind that Multiple must be set to true for multi-selection to work properly.

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

@code{
    int selectedValue;
}

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

@code{
    int selectedValue;

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

        return Task.CompletedTask;
    }
}

Best Practices

Set a Default Value

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

Do Not Use as a Menu

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

API

Attributes

Select

SelectItem

SelectGroup