KendoReact DropDownList Overview

The KendoReact DropDownList is a form component that lets you choose a single predefined value from a list and is a richer version of the <select> element and supports filtering, default items, and virtualization.

The KendoReact DropDownList component is part of the KendoReact library of React UI components. It is distributed through NPM under the kendo-react-dropdowns package.


The following example demonstrates the DropDownList in action.

Example
View Source
Change Theme:

The DropDownList is part of the KendoReact Dropdowns component library. The procedures for installing, importing, and using the Dropdowns are identical for all components in the package. To learn how to use the DropDownList and the rest of the Dropdowns, see the Getting Started with the KendoReact Dropdowns guide.

Key Features

  • Value and data binding—You can bind the DropDownList to primitive (strings and numbers) or complex (objects) items.
  • Default item—You can set an initial item to act as a placeholder for the DropDownList.
  • Filtering—You can configure the DropDownList to filter the results locally or on the server.
  • Custom rendering—You can customize the way the DropDownList component renders its elements.
  • Virtualization—The virtual scrolling feature is an alternative to paging and helps display large data sets.
  • Floating labels—You can show floating labels inside the KendoReact DropDownList component.
  • Forms support—You can use the React DropDownList component with HTML form elements or with the KendoReact Form component.
  • Globalization—The built-in globalization support allows you to create apps that are ready to be implemented worldwide.
  • Keyboard navigation—The DropDownList supports various keyboard shortcuts.
  • Accessibility—The DropDownList is accessible for screen readers and supports WAI-ARIA attributes.

To learn more about the appearance, anatomy, and accessibility of the DropDownList, visit the Progress Design System documentation—an information portal offering rich component usage guidelines, descriptions of the available style variables, and globalization support details.

In this article

Not finding the help you need?