Progress Telerik UI for Blazor

Blazor MultiSelect

  • Provide suggestions based on the user input and let them select more than one option to create chips in the input with the Blazor MultiSelect component. 
  • This component is part of the largest truly native Blazor component suite - Telerik UI for Blazor designed to perfectly fit in any app’s requirement.
  • The Blazor UI suite also comes with professionally designed themes enabled with a flip of a switch, document processing library, rich docs & demos to help you get started in no time.
Telerik UI for Blazor Suite
Nasa, Visa, Microsoft Fox, Samsung, IBM World Bank Group, Volvo
  • MultiSelect Overview

    The Blazor MultiSelect Component displays to users a list of predefined options and allows typing or multiple selection of values from that list. The MultiSelect is a powerful full-featured UI control that can be bound to data and adapted to fulfill any project requirement by configuring its dimensions, templates and handling the available events. The Telerik MultiSelect works in both Blazor WebAssembly (WASM) and Server-side Blazor apps and provides convenience to users by providing suggestions as they type, has built-in keyboard navigation and can be translated to any language using its localization feature.

    Telerik UI for Blazor Multiselect Overview
  • MultiSelect Data Binding

    The Blazor MultiSelect component supports binding to primitive types (such as simple collection of int, string or other data types) or data models in Blazor applications.

    MultiSelect data binding example.

    Telerik UI for Blazor Data Binding
  • MultiSelect Filtering and Searching

    For faster and simplified search of values within the MultiSelect component, you can set the Filterable parameter of the component. This way the control will filter the available suggestions according to the current user input.

    The MultiSelect offers additional parameters to fine-tune filtering and searching:

    • MinLength – allows you to control when the filter list will appear;
    • FilterOperator – lets you define filtering operator such as “startswith”, “contains”, “endswith” etc.;
    Telerik UI for Blazor MultiSelect Filtering
  • MultiSelect Custom Filtering

    The MultiSelect component allows you define custom filtering and setting a data source dynamically through the OnRead event.

    MultiSelect custom filtering example.
    Telerik UI for Blazor MultiSelect Custom Filtering
  • Customizing MultiSelect with Templates

    The MultiSelect component and its items rendering can be easily customized using one of the templating options it offers:

    • Header Template - defines custom pop-up header appearance of the MultiSelect
    • Item Template – lets you customize the appearance of all list items
    • Footer Template – helps you design your own pop-up MultiSelect footer
    Telerik UI for Blazor Multiselect TŠµmplates
  • MultiSelect Validation

    Built-in support for EditForm and DataAnnotation validation is available out-of-the box in all Telerik Blazor components, including MultiSelect.

    Example of MultiSelect Validation in Blazor.

    Telerik UI for Blazor MultiSelect Validation
  • MultiSelect Events

    You have several events available for capturing and handling changes to the values in the MultiSelect component: 

    • OnRead – fires upon component initialization and user filtering
    • ValueChanged - fires upon user selection change
    • OnChange- fires only when the user presses Enter, or blurs the input (for example, clicks outside of the component)
    • OnBlur - an event which is triggered when it loses focus 
    Telerik UI for Blazor Events
  • MultiSelect TabIndex

    The Blazor MultiSelect component, just like all other Telerik UI for Blazor input components, supports keyboard navigation to switch between components thanks to the HTML TabIndex property. Pressing Tab will normally focus the next available input component, the same way your users are accustomed to when standard HTML inputs are used. Having the TabIndex setting lets you customize that order.
  • MultiSelect Grouping

    The built-in grouping functionality in the MultiSelect component helps users navigate easily through the options in the list and choose best what they want from each category. The category label on top of the list makes it easier to locate the particular item you are looking for by first navigating to the appropriate category. 

    Check out the Telerik UI for Blazor MultiSelect Grouping functionality 
    Telerik UI for Blazor MultiSelect - Grouping
  • Virtualization

    Lazy loading the items of the MultiSelect can be a great way to improve the user experience by reducing loading and response times. The component, alongside all other <select>-like components, fully supports virtualization, which loads only the currently visible elements and saves your users precious CPU cycles. 
  • MultiSelect Keyboard Navigation and Accessibility

    Like all other Telerik UI for Blazor components, the MultiSelect supports out of the box Keyboard Navigation that will allow easy navigation and interaction with the list values of the component using keyboard. Semantic HTML and support for the accessibility standards (WCAG, Section 508 and WAI-ARIA attributes for screen readers) let users with disabilities use the Telerik MultiSelect with ease.

    MultiSelect Keyboard Navigation Demo. 

    Telerik UI for Bazor Keyboard Navigation
  • MultiSelect Globalization and Localization

    The MultiSelect control has built-in localization support, which makes it easy to translate texts to any language that your Blazor app may require.

    Demo of MultiSelect component in various languages.
    Telerik UI for Blazor Globalization and Localization
  • MultiSelect Theming

    The Telerik Blazor MultiSelect has several built-in themes such as Default (our own styling), Material (based on the Material Design guidelines) and Bootstrap (which looks like the Bootstrap styling to integrate better). You can easily customize any of out-of-the-box themes with a few lines of CSS, or create new theme to match your colors and branding by using the Telerik SASS ThemeBuilder application.

    Telerik UI for Blazor Multiselect Theming

Next Steps

Launch demos

See Telerik UI for Blazor in action and check out how much it can do out-of-the-box.

Download free trial

Try Telerik UI for Blazor with dedicated technical support.