Select component

<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

Basic

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

Multiple

Add the Multiple attribute to allow more than one option to be selected.
<Select TValue="int" Multiple="true">
    <SelectItem Value="1">One</SelectItem>
    <SelectItem Value="2">Two</SelectItem>
    <SelectItem Value="3">Three</SelectItem>
    <SelectItem Value="4">Four</SelectItem>
</Select>

Groups

You can also group items into categories for better user experience.
<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.

Two-way binding

By using bind-* attribute the selected item value will be automatically assigned to the member variable.
<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;
}

Manual event binding

When using the event SelectedValueChanged, you also must define the SelectedValue attribute.
<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;
    }
}

Attributes

Select

Name Description Type Default
TValue SelectedValue or SelectedValues data type. generic
SelectedValue Selected item value when in single edit mode. TValue default
SelectedValues Selected item value when in multi edit mode. IReadOnlyList<TValue> default
SelectedValueChanged Occurs when the selected item value has changed. EventCallback<TValue>
SelectedValuesChanged Occurs when the selected items value has changed (only when Multiple="true"). EventCallback<IReadOnlyList<TValue>>
MaxVisibleItems Specifies how many options should be shown at once. int? null

SelectItem

Name Description Type Default
TValue Value data type. generic
Value Gets or sets the item value. TValue default
Disabled Disable the item from mouse click. bool false
Hidden Hides the item from the list - useful for default. bool false

SelectGroup

Name Description Type Default
Label Gets or sets the group label. string