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.

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 bindingYou can bind the DropDownList to primitive (strings and numbers) or complex (objects) items.
  • Default itemYou can set an initial item to act as a placeholder for the DropDownList.
  • FilteringYou can configure the DropDownList to filter the results locally or on the server.
  • Custom renderingYou can customize the way the DropDownList component renders its elements.
  • VirtualizationThe virtual scrolling feature is an alternative to paging and helps display large data sets.
  • Floating labelsYou can show floating labels inside the KendoReact DropDownList component.
  • Forms supportYou can use the React DropDownList component with HTML form elements or with the KendoReact Form component.
  • GlobalizationThe built-in globalization support allows you to create apps that are ready to be implemented worldwide.
  • Keyboard navigationThe DropDownList supports various keyboard shortcuts.
  • AccessibilityThe DropDownList is accessible for screen readers and supports WAI-ARIA attributes.

In this article

Not finding the help you need?