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.
Basic Usage
The following example demonstrates the DropDownList in action.
Functionality and Features
- Value and data binding
- Default item
- Filtering
- Custom rendering
- Virtualization
- Floating labels
- Appearance
- Forms support
- Common scenarios
- Globalization
- Keyboard navigation
- Accessibility
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.
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
- DropDownList Homepage
- API Reference of the DropDownList Component
- Getting Started with Kendo UI for Vue - JavaScript (Online Guide)
- Getting Started with Kendo UI for Vue - TypeScript (Online Guide)
- Getting Started with Kendo UI for Vue - JavaScript + Options API (Online Guide)
- Getting Started with Kendo UI for Vue - TypeScript + Options API (Online Guide)
- Getting Started with Kendo UI for Vue - Nuxt 3 (Online Guide)
- Virtual Classroom (Training Course for Registered Users)
- DropDownList Forum
- Knowledge Base
- Kendo UI Productivity Tools extension for VS Code