Kendo UI for Vue DropDownList Overview

The KendoVue 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 KendoVue DropDownList component is part of the KendoVue library of Vue UI components. It is distributed through NPM under the kendo-vue-dropdowns package.

The DropDownList Component is part of Kendo UI for Vue, a professional grade UI library with 100+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

Basic Usage

The following example demonstrates the DropDownList in action.

Example
View Source
Change Theme:

Functionality and Features

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.

Events

The DropDownList provides events which:

Common Usage

The following example demonstrates basic DropDownList events.

Example
View Source
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.

Support and Learning Resources

Additional Resources