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-*
orSelectedValue
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
andSelectItem
. - String values must be defined with special syntax eg. @("hello"), see #7785
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
<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 theMultiple
attribute to allow more than one option to be selected.
<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>
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.
Value
attribute is required on the SelectItem
. Otherwise the Select
will not behave as expected.
Two-way binding
By usingbind-*
attribute the selected item value will be automatically assigned to the member variable.
<Select @bind-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 eventSelectedValueChanged
, you also must define the SelectedValue
attribute.
<Select TValue="int" SelectedValue="" SelectedValueChanged=""> <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
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 ).
|
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 |