MultiSelect. Unlike a normal select, multiselect allows the user to select multiple options at once.
Selected initials:
<HxMultiSelect Label="Band members"
TItem="Person"
TValue="string"
Data="@people"
@bind-Value="@selectedPersonsInitials"
TextSelector="@(p => p.Name)"
ValueSelector="@(p => p.Initials)"
EmptyText="-select values-"
NullDataText="Loading band members..." />
<p class="mt-3">Selected initials: @String.Join(' ', selectedPersonsInitials)</p>
@code {
private List<Person> people;
private List<string> selectedPersonsInitials { get; set; } = new();
protected override async Task OnInitializedAsync()
{
await Task.Delay(1000); // simulates slow server API call
people = new List<Person>
{
new Person("Starr Ringo", "RS"),
new Person("Lennon John", "JL"),
new Person("McCartney Paul", "PMC"),
new Person("Harrison George", "GH")
};
}
private record Person(string Name, string Initials);
}
Name | Type | Description |
---|---|---|
AdditionalAttributes | IReadOnlyDictionary<string, object> |
A collection of additional attributes that will be applied to the created element. |
AutoSort | bool |
When set to false , items will no longer be sorted.Default value is true . |
ChipTemplate | RenderFragment |
Chip template. |
CssClass | string |
Custom CSS class to render with wrapping div. |
Data | IEnumerable<TItem> |
Items to display. |
DisplayName | string |
|
EmptyText | string |
Text to display when the selection is empty (the Value property is null or empty). |
Enabled | bool? |
When null (default), the Enabled value is received from cascading FormState .
When value is false , input is rendered as disabled.
To set multiple controls as disabled use |
GenerateChip | bool |
When true , HxChipGenerator is used to generate chip item(s). Default is true . |
Hint | string |
Hint to render after input as form-text. |
HintTemplate | RenderFragment |
Hint to render after input as form-text. |
InputCssClass | string |
Custom CSS class to render with the input element. |
InputGroupEndTemplate | RenderFragment |
Input-group at the end of the input. |
InputGroupEndText | string |
Input-group at the end of the input. |
InputGroupStartTemplate | RenderFragment |
Input-group at the beginning of the input. |
InputGroupStartText | string |
Input-group at the beginning of the input. |
InputSize | InputSize? |
Size of the input. |
InputText | string |
Text to display in the input (default is a list of selected values). |
InputTextSelector | Func<IEnumerable<TItem>, string> |
Function to build the text to be displayed in the input from selected items (default is a list of selected values). |
Label | string |
Label text. |
LabelCssClass | string |
Custom CSS class to render with the label. |
LabelTemplate | RenderFragment |
Label content. |
NullDataText | string |
Text to display when Data is null . |
Settings | MultiSelectSettings |
Set of settings to be applied to the component instance (overrides HxMultiSelect.Defaults , overridden by individual parameters). |
SortKeySelector | Func<TItem, IComparable> |
Selects value for items sorting. When not set, TextSelector property will be used.If you need complex sorting, pre-sort data manually or create a custom comparable property. |
TextSelector | Func<TItem, string> |
Selects text to display from item. When not set, ToString() is used. |
ValidationMessageMode | ValidationMessageMode? |
Specifies how the validation message should be displayed. Default is ValidationMessageMode.Regular , you can override application-wide default for all inputs in HxInputBase.Defaults . |
Value | List<TValue> |
Value of the input. This should be used with two-way binding. |
ValueChanged | EventCallback<List<TValue>> |
A callback that updates the bound value. |
ValueExpression | Expression<Func<List<TValue>>> |
An expression that identifies the bound value. |
ValueSelector | Func<TItem, TValue> |
Selects value from item. Not required when TValue is same as TItem . |
Method | Returns | Description |
---|---|---|
FocusAsync() | ValueTask |
Gives focus to the input element. |
Property | Type | Description |
---|---|---|
Defaults | MultiSelectSettings |
Application-wide defaults for the HxMultiSelect . |
Name | Description | Default |
---|---|---|
--hx-multi-select-dropdown-menu-height | Height of the dropdown menu. | 300px |
--hx-multi-select-background-color | Height of the dropdown menu. | var(--bs-body-bg) |