DropDownList

The Blazor DropDownList lets the user choose one option from a list of choices. It provides flexible data binding, appearance customization through templates, events, validation, accessibility and keyboard navigation. You can also have a placeholder message for no selection. The DropDownList works in both Blazor WebAssembly (WASM) and Server-side Blazor apps

You can bind the Telerik dropdown to a simple collection of numbers or strings, or entire models from your Blazor app.

Examples of data binding a dropdown list in Blazor.

You can customize the appearance of the Telerik dropdown 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

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

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 dropdown list 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 DropDownList 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.