Getting Started with KendoReact DropDownList

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 DropDownList Component is part of KendoReact, a professionally built commercial UI library. To try out this DropDownList you need to sign up for a 30-day trial, which gives you access to the full KendoReact library.


Basic Usage

The following example demonstrates the DropDownList in action.

Example
View Source
Edit In Stackblitz  
Change Theme:

Functionality and Features

Events

The DropDownList provides events which:

Common Usage

The following example demonstrates basic DropDownList events.

Example
View Source
Edit In Stackblitz  
Change Theme:

Looping through Items

By default, you can select a DropDownList item by pressing a keyboard key. For example, if the DropDownList items are Foo, Bar, and Baz and the user presses the B letter key, based on the alphabetical order of the items, the keypress selects the first item which starts with a B.

The keyboard selection is available only if the filtering functionality is disabled.