HxMultiSelect #

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

Basic usage #

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);
}

API #

Parameters #

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 HxFormState.
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.
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, overriden 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 Height of the dropdown menu. var(--bs-white)
An unhandled error has occurred. Reload 🗙