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 is part of Kendo UI for Vue, a professional grade UI library with 110+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.Start Free Trial

Basic Usage

The following example demonstrates the DropDownList in action.

Change Theme

Theme

Loading ...

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:

Ease common scenarios
Enable item selection through the keyboard

Common Usage

The following example demonstrates basic DropDownList events.

Change Theme

Theme

Loading ...

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.