UI for Blazor

Blazor ComboBox

  • Choose between a list of pre-set options or enter your own with the Blazor ComboBox component.
  • Part of the Telerik UI for Blazor library along with 110+ professionally-designed UI components.
  • Includes support, documentation, demos, virtual classrooms, Visual Studio Code Extensions and more!
  • Intuitive Interface for Easy Items Selection with Blazor ComboBox

    The Blazor Combobox shows a list of options the user can select from. They can easily filter that list to find data faster, or even input their own text. You can customize the appearance of the items and the selection through templates, implement your own custom filtering and load data on demand, react to events, validate the user input and benefit from built-in support for web accessibility standards and keyboard navigation. The ComboBox component works in both WebAssembly (WASM) and Server-side Blazor apps. 

    Check out the Blazor ComboBox demo

    Telerik UI for Blazor ComboBox Overview
  • Blazor ComboBox Events

    The Blazor ComboBox component exposes 3 events – OnChange, ValueChanged & OnBlur to let you handle user input any way you need to. They are triggered as their names suggest – when the value is submitted, on every keystroke and whenever it loses focus. 
    Telerik UI for Blazor Editor Events
  • ComboBox Data Binding

    You can provide the simplest of data like a collection of numbers or strings, or entire models from your app – the Telerik ComboBox can handle all of them. 

    More about Data Binding a combo box 

    Telerik UI for Blazor Form Data Binding
  • ComboBox Filtering

    Nobody wants to scroll through long lists of options, so the ComboBox lets you start typing the text you’re looking for, and it will filter the data to show you only the relevant items to choose from. You can control how many characters the user writes before they get the filtered list, what filter operator is used, and even implement your own filtering by, for example, requesting the items from the server every time. 

    Telerik UI for Blazor ComboBox Filtering
  • ComboBox Custom Values

    The standard dropdowns require that you select one of a predefined list of options. The Telerik Blazor ComboBox lets you type in your own value for cases when the application developer could not have foreseen all the possible entries. 

    Telerik UI for Blazor ComboBox Custom Values
  • Customizing ComboBox with Templates

    You can customize the appearance of the Telerik UI for Blazor ComboBox component through templates to display data in your desired manner—from adding more data than just text (such as price) to implementing a grid-like multi-column dropdown with a few lines of CSS. You can modify the:

    • Header Template – your own content above the list of items in the dropdown
    • Footer Template – always visible below the list of items
    • Item Template – how the individual items render, so you can add more than just the text
    • No Data Template – when there are no items to be displayed

    Check out the Combobox appearance customization demo

    Telerik UI for Blazor Templates
  • ComboBox Validation

    Built-in support for EditForm and DataAnnotation validation is a must, and it is available in all Telerik Blazor components, including the ComboBox. 

    Telerik UI for Blazor Combobox Validation
  • ComboBox Grouping

    The Telerik Blazor ComboBox component provides built-in grouping functionality enabled through the GroupField parameter. It helps users navigate easily through the list and choose the items they desire. 

    Example of Blazor ComboBox Grouping
    Telerik UI for Blazor ComboBox - Grouping
  • Prefix and Suffix Adornments

    Elevate user interactivity leveraging the option for adding prefix and suffix adornments. These are custom items, usually an icon or button, inside the field before or after the input area. Typical prefix adornments are currency symbols or unit indicators, while suffix adornments are often used for password visibility toggles, formatting or clearing the input.

    See Telerik UI for Blazor ComboBox adornments demo

    Combobox adornments
  • ComboBox Globalization and Localization

    While most of the ComboBox content comes from the application data, the few strings the component has in its own UI can be translated easily for users around the globe.

    Check it out in the ComboBox Localization demo

    Blazor Editor Globalization and Localization
  • ComboBox Popup Settings

    The Blazor ComboBox allows you to configure its popup options from a single tag: define the minimum and maximum dimensions along with the width, height and class that are already existing parameters.

    In addition to that, the Open and Close methods allow you to toggle the popup visibility without triggering the OnOpen/OnClose events.

  • Virtualization

    The Telerik UI for Blazor ComboBox supports virtualizing the elements in the list. This greatly improves response times when a particularly large amount of entries is loaded (e.g., a list of countries, currencies, brands, etc.). 
  • ComboBox TabIndex

    The Blazor ComboBox 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.
  • ComboBox Adaptive Rendering

    Set the AdaptiveMode parameter to AdaptiveMode.Auto to enable a mobile-friendly rendering of the ComboBox suggestion list popup. This mode triggers the component to automatically adapt to the current screen size and changes its rendering accordingly. In auto adaptive mode, the ComboBox component also allows you to define the title text rendered in the header of the popup.

    See the Blazor ComboBox adaptive rendering demo

    Telerik UI for Blazor ComboBox Component Adaptive Rendering
  • Blazor ComboBox Accessibility and Keyboard Navigation

    Semantic HTML and support for the accessibility standards (including WCAG, Section 508 and WAI-ARIA attributes for screen readers) let users with disabilities use the Telerik combo box with ease. The built-in keyboard support lets you navigate the component and select the desired item without having to touch a pointing device. 

    Learn more about the supported keys and user actions in the ComboBox Keyboard Navigation demo

    Telerik UI fro ASP.NET Core Accessibility
  • Blazor ComboBox Theming

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

    Telerik UI for Blazor ComboBox-Themes
  • Right-to-Left (RTL) Support

    The Telerik UI for Blazor ComboBox component supports right-to-left configuration. The RTL functionality is supported by most of our components to accommodate users who communicate in a right-to-left language script, such as Arabic and Hebrew.

    Learn more in our Blazor Right-to-Left Support documentation 

    RTL Support

All Blazor Components

Next Steps