HxMultiSelect #

MultiSelect. Unlike a normal select, multiselect allows the user to select multiple options at once.

Basic usage #

Selected employees (IDs):

Filtering #

You can enable filtering by setting AllowFiltering="true".
You can use the FilterEmptyResultTemplate to customize the message displayed when no items are found.

Selected employees (IDs):

Custom filtering #

You can customize filtering by setting FilterPredicate to a delegate that returns bool and accepts two parameters: TItem and string (filter).
You can use the FilterEmptyResultTemplate to customize the content displayed when no items are found.

Selected employees (IDs):

Select all #

You can enable the "-select all-" option by setting AllowSelectAll="true".
You can customize the text of the "-select all-" option by setting SelectAllText.

Selected employees (IDs):

API #

Parameters #

Name Type Description
AdditionalAttributes IReadOnlyDictionary<string, object> A collection of additional attributes that will be applied to the created element.
AllowFiltering bool? Enables filtering capabilities.
AllowSelectAll bool? Enables select all capabilities.
AutoSort bool When set to false, items will no longer be sorted.
Default value is true.
ChipTemplate RenderFragment Chip template.
ClearFilterOnHide bool? When enabled the filter will be cleared when the dropdown is closed.
CssClass string Custom CSS class to render with wrapping div.
Data IEnumerable<TItem> Items to display.
DisplayName string Gets or sets the display name for this field.
This value is used when generating error messages when the input value fails to parse correctly.
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 HxFormState.
FilterClearIcon IconBase Icon displayed in filter input for clearing the filter.
FilterEmptyResultTemplate RenderFragment Template that defines what should be rendered in case of empty items.
FilterEmptyResultText string Text to display when the filtered results list is empty and when not using FilterEmptyResultTemplate.
FilterPredicate Func<TItem, string, bool> Defines a custom filtering predicate to apply to the list of items. If not specified, the default behavior filters items based on whether the item text (obtained via TextSelector) contains the filter query string.
FilterSearchIcon IconBase Icon displayed in filter input for searching the filter.
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.
SelectAllText string Text to display for the select all dropdown option.
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.

Methods #

Method Returns Description
FocusAsync() ValueTask Gives focus to the input element.

Static properties #

Property Type Description
Defaults MultiSelectSettings Application-wide defaults for the HxMultiSelect.

CSS variables #

Name Description Default
--hx-multi-select-dropdown-menu-height Height of the dropdown menu. 300px
--hx-multi-select-background-color Background color of the dropdown menu. var(--bs-body-bg)
--hx-multi-select-filter-input-icon-opacity Opacity of the filter input icon. .25
An unhandled error has occurred. Reload 🗙