Blazor MultiSelect Overview

The Blazor MultiSelect component lets the user select several items from the available list. It is similar to a <select multiple> in this regard. The MultiSelect offers suggestions as you type and they can be filtered. You can control the list of suggestions through data binding, various appearance settings like dimensions and templates.

Telerik UI for Blazor Ninja image

The MultiSelect component is part of Telerik UI for Blazor, a professional grade UI library with 95+ native components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

Creating MultiSelect

  1. Use the TelerikMultiSelect tag to add the component to your razor page.

  2. Populate the Data property with the collection of items that you want to appear in the dropdown.

  3. Bind the value of the component to a collection of the same type as the type defined in the ValueField parameter.

  4. (Optional) Enable features like placeholder text, clear button, and AutoClose.

MultiSelect two-way value binding, main features, and simple data binding

@* Main features and simple data binding for the suggestions and the Value *@
<TelerikMultiSelect Data="@Countries"
                    @bind-Value="@Values"
                    Placeholder="Enter Balkan country, e.g., Bulgaria"
                    Width="350px" ClearButton="true" AutoClose="false">
</TelerikMultiSelect>
@if (Values.Count > 0)
{
    <ul>
        @foreach (var item in Values)
        {
            <li>@item</li>
        }
    </ul>
}
@code {
    List<string> Countries { get; set; } = new List<string>();
    List<string> Values { get; set; } = new List<string>();
    protected override void OnInitialized()
    {
        Countries.Add("Albania");
        Countries.Add("Bosnia & Herzegovina");
        Countries.Add("Bulgaria");
        Countries.Add("Croatia");
        Countries.Add("Kosovo");
        Countries.Add("North Macedonia");
        Countries.Add("Montenegro");
        Countries.Add("Serbia");
        Countries.Add("Slovenia");
        base.OnInitialized();
    }
}

Component Reference

The MultiSelect is a generic component and its type is determined by the type of the model you use as its data source. You can find examples in the Data Bind - Considerations article.

Data Binding

The Blazor MultiSelect requires a data source so that it can populate the dropdown with data. To provide a data source, use the Data property. Read more about the Blazor MultiSelect data binding...

Filtering

The Blazor MultiSelect has a built-in filter that narrows down the shown suggestions as the end-user types. To configure this feature, use the Filterable parameter. Additionally, you can choose between different filter operators and configure after how many symbols the list with suggestions will appear. Read more about the Blazor MultiSelect filter...

Grouping

The Blazor MultiSelect enables you to group the listed suggestions into categories so you can help the end-user to browse faster through longer lists. Read more about the Blazor MultiSelect grouping...

Templates

You can use the functionality of the built-in templates and customize the default rendering of the component. Read more about the Blazor MultiSelect templates...

Validation

You can ensure that the component value is acceptable by using the built-in validation. Read more about input validation....

Virtualization

By virtualizing the elements in the dropdown, you can use huge data sources without performance issues. The UI virtualization works with both local and remote data. Read more about the Blazor MultiSelect virtualization...

Parameters

The Blazor MultiSelect provides various parameters that allow you to configure the component:

Parameter Type Description
AutoClose bool
(true)
Defines whether the dropdown list containing the items for the MultiSelect will automatically close after each user selection.
ClearButton bool Whether the user will have the option to clear the selected items with a button on the input. When it is clicked, the Value will be updated to an empty list.
Data IEnumerable<TItem> Allows you to provide the data source. Required.
DebounceDelay int
150
Time in milliseconds between the last typed symbol and the internal oninput event firing. Applies when the user types and filters. Use it to balance between client-side performance and number of database queries.
Enabled bool Whether the component is enabled.
Filterable bool Whether filtering is enabled for the end user (suggestions will get narrowed down as they type).
FilterOperator StringFilterOperator
(StartsWith)
The string operation that will be used for filtering.
Id string Renders as the id attribute on the <select /> element, so you can attach a <label for=""> to it.
MinLength int How many characters the text has to be before the suggestions list appears. Cannot be 0. Often works together with filtering.
Placeholder string The text the user sees as a hint when there is no selection.
TextField string
(Text)
The field in the model from which the text of the items is taken.
TItem Type The type of the model to which the component is bound. Required if you can't provide Data or Value. Determines the type of the reference object.
TValue Type The type of the value field in the model to which the component is bound. Required if you can't provide Data or Value. Determines the type of the reference object. The type of the values can be:
- number (such as int, double, and so on)
- string
- Guid
- Enum
Value and bind-Value List<TValue> Get/set the value of the component, can be used for binding. Use the @bind-Value syntax for two-way binding, for example, to a variable of your own. The Value must be a List<TValue>.
ValueField string
(Value)
The name of the field from the model that will be used as values in the selection.
TabIndex int? Mps to the tabindex attribute of the HTML element. You can use it to customize the order in which the inputs in your form focus with the Tab key.

Styling and Appearance

The following parameters enable you to customize the appearance of the Blazor MultiSelect:

Parameter Type Description
Width string the width of the component. It will target both the dropdown and the main element if the dropdown has no specific width set. The default Width value is null, but the theme applies 100%. Use the Width property or custom CSS to set another value in any supported unit.
Class string the CSS class that will be rendered on the main wrapping element of the component.

You can find more options for customizing the MultiSelect styling in the Appearance article.

The popup of the component can be additionally customized via nested tags:

<TelerikMultiSelect>
    <MultiSelectSettings>
        <MultiSelectPopupSettings Height="..." />
    </MultiSelectSettings>
</TelerikMultiSelect>

The MultiSelect provides the following popup settings:

Parameter Type Description
AnimationDuration int the animation duration of the popup.
Class string additional CSS class to customize the appearance of the popup.
Height string the height of the popup.
MinHeight string the minimum height of the popup.
MaxHeight string the maximum height of the popup.
Width string the width of the popup. If you don't specify a value, the dropdown width will match the anchor element width which can help with responsive layouts and 100% widths.
MinWidth string the minimum width of the popup.
MaxWidth string the maximum width of the popup.

If you are looking for more fields from the view-model that describes the dropdown items, not just the Value, see the Get model from dropdown KB article and the OnChange event.

You may also want to review/join the discussion and Vote for this request: Binding DropDownList Value to complex model

Next Steps

See Also

In this article