logo

Select

Select component to select value from options.

When To Use

  • A dropdown menu for displaying choices - an elegant alternative to the native <Select> element.
  • Utilizing Radio is recommended when there are fewer total options (less than 5).

Examples

Basic Usage.

expand code expand code

Search the options using custom filter ignoring non space characters.

expand code expand code

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.

expand code expand code

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

expand code expand code

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.

expand code expand code

Select inside a form component

expand code expand code

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.

expand code expand code

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

expand code expand code

Customize the dropdown menu via DropdownRender.

expand code expand code

Bordered-less style component.

expand code expand code

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

This example is an icon selector.

expand code expand code

Allows for custom rendering of tags

expand code expand code

MaxTagCount can be either set to literal or changed live.

expand code expand code

Example how to use the PopupContainerSelector.

expand code expand code

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> { }
expand code expand code

Multiple selection, selecting from existing items.

expand code expand code

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.

expand code expand code

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

expand code expand code

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.

expand code expand code

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.

expand code expand code

Show select in modal

expand code expand code

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

Currently not implemented.

expand code expand code

Hide already selected options in the dropdown.

expand code expand code

Implement a list selector with a custom dropdown render.

expand code expand code

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

expand code expand code

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

expand code expand code

You can use EnumSelect from enum types.

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

expand code expand code

Select API#

Property Description Type Default Value
Bordered ParameterToggle the border style. Boolean true
EnableVirtualization ParameterWhether to enable virtualization feature or not, only works for .NET 5 and higher Boolean false
DataSource ParameterThe datasource for this component. IEnumerable<TItem> --
DataSourceEqualityComparer ParameterEqualityComparer that will be used during DataSource change detection. If no comparer set, default .Net is going to be used. IEqualityComparer<TItem> --
DefaultActiveFirstOption ParameterActivates the first item that is not deactivated. Boolean --
DisabledName ParameterThe name of the property to be used as a disabled indicator. String --
DropdownMatchSelectWidth ParameterWill match dropdown width. If true, matches width of the widest item in the dropdown. If string, matches width of the string's value (ex: 250px) OneOf<Boolean, String> true
DropdownMaxWidth ParameterWill not allow dropdown width to grow above stated in here value (eg. "768px") String auto
GroupName ParameterThe name of the property to be used as a group indicator. If the value is set, the entries are displayed in groups. Use additional AntDesign.SelectBase`2.SortByGroup and AntDesign.SelectBase`2.SortByLabel. String --
IgnoreItemChanges ParameterIs used to increase the speed. If you expect changes to the label name, group name or disabled indicator, disable this property. Boolean true
ItemTemplate ParameterIs used to customize the item style. RenderFragment<TItem> --
NotFoundContent ParameterSpecify content to show when no result matches. RenderFragment --
OnBlur ParameterCalled when blur. Action --
OnCreateCustomTag ParameterCalled when custom tag is created. Action<String> --
OnDataSourceChanged ParameterCalled when the datasource object/reference changes. It does not trigger if a value inside the datasource changes. Action --
OnDropdownVisibleChange ParameterCalled when the dropdown visibility changes. Action<Boolean> --
OnSearch ParameterCallback function that is fired when input changed. Action<String> --
FilterExpression Parameter Func<SelectOptionItem<TItemValue, TItem>, String, Boolean> --
PopupContainerMaxHeight Parameter String --
ShowArrowIcon ParameterWhether to show the drop-down arrow Boolean true
TokenSeparators ParameterDefine what characters will be treated as token separators for newly created tags. Useful when creating new tags using only keyboard. Char[] --
ValueChanged ParameterUsed for the two-way binding. EventCallback<TItemValue> --
Value ParameterGet or set the selected value. TItemValue --
LabelProperty ParameterSpecifies the label property in the option object. If use this property, should not use Use ItemLabel instead

Obsolete Will be removed in a future version.
Func<TItem, String> --
ValueProperty ParameterSpecifies the value property in the option object. If use this property, should not use Use ItemValue instead

Obsolete Will be removed in a future version.
Func<TItem, TItemValue> --
DisabledPredicate ParameterSpecifies predicate for disabled options Func<TItem, Boolean> --
DefaultValue ParameterUsed when Mode = default - The value is used during initialization and when pressing the Reset button within Forms. TItemValue --
ListboxStyle Parameter String --
BoundaryAdjustMode ParameterOverlay adjustment strategy (when for example browser resize is happening) TriggerBoundaryAdjustMode --
AllowClear ParameterShow clear button. Has no effect if AntDesign.AntInputComponentBase`1.Value type default is also in the list of SelectOption, unless used with AntDesign.SelectBase`2.ValueOnClear. Boolean --
AutoClearSearchValue ParameterWhether the current search will be cleared on selecting an item. Boolean --
Disabled ParameterWhether the Select component is disabled. Boolean --
Mode ParameterSet mode of Select - default | multiple | tags String --
EnableSearch ParameterIndicates whether the search function is active or not. Always true for mode tags. Boolean --
SearchDebounceMilliseconds ParameterDelays the processing of the search input event until the user has stopped typing for a predetermined amount of time. Default to 250ms. Int32 --
Loading ParameterShow loading indicator. You have to write the loading logic on your own. Boolean --
Open ParameterControlled open state of dropdown. Boolean --
OpenChanged ParameterCallback function that is called when open state changes. EventCallback<Boolean> --
Placeholder ParameterPlaceholder of select. String --
OnFocus ParameterCalled when focus. EventCallback --
AutoFocus ParameterAuto focus. Boolean --
SortByGroup ParameterThe name of the property to be used as a group indicator. If the value is set, the entries are displayed in groups. Use additional SortByGroup and SortByLabel. SortDirection --
SortByLabel ParameterSort items by label value. None | Ascending | Descending SortDirection --
HideSelected ParameterHides the selected items when they are selected. Boolean --
ValuesChanged ParameterUsed for the two-way binding. EventCallback<IEnumerable<TItemValue>> --
SuffixIcon ParameterThe custom suffix icon. RenderFragment --
PrefixIcon ParameterThe custom prefix icon. RenderFragment --
AccessKey ParameterThe accesskey global attribute. String --
DefaultValues ParameterUsed when Mode = multiple | tags - The values are used during initialization and when pressing the Reset button within Forms. IEnumerable<TItemValue> --
OnClearSelected ParameterCalled when the user clears the selection. EventCallback --
OnSelectedItemChanged ParameterCalled when the selected item changes. EventCallback<TItem> --
OnSelectedItemsChanged ParameterCalled when the selected items changes. EventCallback<IEnumerable<TItem>> --
Values ParameterGet or set the selected values. IEnumerable<TItemValue> --
CustomTagLabelToValue ParameterConverts custom tag (a string) to TItemValue type. Func<String, TItemValue> --
SelectOptions ParameterUsed for rendering select options manually. RenderFragment --
MaxTagTextLength ParameterHow long (number of characters) a tag will be. Only for Mode = "multiple" or Mode = "tags" Int32 --
LabelInValue ParameterWhether to embed label in value, turn the format of value from TItemValue to string (JSON) e.g. { "value": TItemValue, "label": "Label value" } Boolean --
MaxTagCount ParameterMax tag count to show. responsive will cost render performance. OneOf<Int32, ResponsiveTag> --
ValueOnClear ParameterWhen Clear button is pressed, Value will be set to whatever is set in ValueOnClear TItemValue --
ItemLabel ParameterSpecifies the label property in the option object. If use this property, should not use AntDesign.SelectBase`2.LabelName Func<TItem, String> --
ItemValue ParameterSpecifies the value property in the option object. If use this property, should not use AntDesign.SelectBase`2.ValueName Func<TItem, TItemValue> --
LabelName ParameterThe name of the property to be used for the label. String --
ValueName ParameterThe name of the property to be used for the value. String --
OnMouseEnter ParameterCalled when mouse enter. Action --
OnMouseLeave ParameterCalled when mouse leave. Action --
PopupContainerSelector ParameterUse this to fix overlay problems e.g. #area String --
DropdownRender ParameterCustomize dropdown content. The context is the original content. RenderFragment<RenderFragment> --
LabelTemplate ParameterIs used to customize the label style. RenderFragment<TItem> --
MaxTagPlaceholder ParameterPlaceholder for hidden tags. If used with ResponsiveTag.Responsive, implement your own handling logic. RenderFragment<IEnumerable<TItem>> --
ShowSearchIcon ParameterWhether show search input in single mode. Boolean --
ValidationMessages Validation messages for the FormItem String[] --
AdditionalAttributes ParameterGets or sets a collection of additional attributes that will be applied to the created element. IReadOnlyDictionary<String, Object> --
ValueExpression ParameterAn expression that identifies the bound value. Expression<Func<TItemValue>> --
ValuesExpression ParameterAn expression that identifies the enumerable of bound values. Expression<Func<IEnumerable<TItemValue>>> --
Size ParameterThe size of the input box. Note: in the context of a form, the `large` size is used. Available: `large` `default` `small` String AntSizeLDSType.Default
CultureInfo ParameterWhat Culture will be used when converting string to value and value to string Useful for InputNumber component. CultureInfo CultureInfo.CurrentCulture
Id ParameterID for the component's HTML String Uniquely Generated ID
Class ParameterSpecifies one or more class names for an DOM element. String --
Style ParameterSpecifies an inline style for a DOM element. String --
RefBack ParameterA ForwardRef instance. You can get a reference to the internal DOM by using AntDesign.ForwardRef.Current. ForwardRef --
Rate Slider
文档已更新,请点击 此处 更新。
A new version of this app is available. Click here to update.