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. 

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 

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. 

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. 

You can customize the appearance of the Telerik ComboBox component through templates so that you can show the data in the desired manner – from adding more data than just the text (such as price), to implementing a grid-like multi-column dropdown with a few lines of CSS. You can modify the:  

• ValueTemplate – what the user sees from the selected item
• Header – your own content above the list of items in the dropdown
• Footer – Always visible below the list of items
• ItemTemplate – how the individual items render, so you can add more than just their text

Check out the Combobox appearance customization demo 

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

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. 

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. 

The Telerik Blazor ComboBox 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 a new theme to match your colors and branding by using the Telerik SASS ThemeBuilder application.