Basic Usage.

Search the options while expanded.

Search the options using custom filter ignoring non space characters.

In this demo you can switch between two DataSources. You can Clear a DataSource or set it to NULL. If the DataSource changes, the OnDataSourceChanged event is triggered.

With the ItemTemplate parameter, it is possible to make visual customizations.

Entries can be grouped using a group indicator. The parameter GroupName is used for this. It is recommended to sort the entries when using the GroupName parameter (SortByLabel | SortByGroup). Otherwise there may be problems with keyboard navigation.

Select inside a form component

As a default behavior, the OnSelectedItemChanged callback can only get the value of the selected item. The LabelInValue property can be used to get the label property of the selected item.

The label of the selected item will be packed as an string (JSON) for passing to the OnSelectedItemChanged callback. This function is only available when the SelectOptions are created without a DataStore.

Try to copy Lucy,Jack to the input. Only available in tags and multiple mode.

Customize the dropdown menu via DropdownRender.

Bordered-less style component.

The drop-down box defaults to a list style and can be customized with ListboxStyle.

This example is an icon selector.

Allows for custom rendering of tags

MaxTagCount can be either set to literal or changed live.

Example how to use the PopupContainerSelector.

Because the generic select is a bit complicated, we wrap a 'string' type 'SimpleSelect'. You can also wrap different types of Select .

    public class SimpleSelect : Select<string, string> { }

    public class SimpleSelectOption : SelectOption<string, string> { }

Multiple selection, selecting from existing items.

The height of the input field for the select defaults to 32px. If size is set to large, the height will be 40px, and if set to small, 24px.

Select with tags, transform input to tag (scroll the menu)

When an Item is initialized, the label value (e.g. Lucy), group name, disabled value is set by reflection. To improve the performance and to avoid having to do the reflection again on every render cycle there is the parameter IgnoreItemChanges. The default value for this parameter is True. If you want that the values are updated at runtime set the parameter to False.

Coordinating the selection of provinces and cities is a common use case and demonstrates how selection can be coordinated.

Using the Cascader component is strongly recommended instead as it is more flexible and capable.

Search with remote data.

Show select in modal

A complete multiple select sample with remote search, debounce fetch, ajax callback order flow, and loading state.

Currently not implemented.

Hide already selected options in the dropdown.

Implement a list selector with a custom dropdown render.

Improve performance with EnableVirtualization=true when you have many options, .NET 5 or higher framework is required.

Auto collapse to tag with responsive case. Not recommend use in large form case since responsive calculation has a perf cost.

You can use EnumSelect from enum types.

When the enum type have the FlagsAttribute, you can use @bind-Value to bind multiple selected values.