# 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](https://www.npmjs.com/package/@progress/kendo-vue-dropdowns).

<CtaPanelOverview></CtaPanelOverview>

## Basic Usage

The following example demonstrates the DropDownList in action.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/dropdowns/dropdownlist/basic/source.txt)

## Functionality and Features

* [Value and data binding](https://www.telerik.com/kendo-vue-ui-develop/components/dropdowns/dropdownlist/binding)
* [Default item](https://www.telerik.com/kendo-vue-ui-develop/components/dropdowns/dropdownlist/default-item)
* [Filtering](https://www.telerik.com/kendo-vue-ui-develop/components/dropdowns/dropdownlist/filtering)
* [Custom rendering](https://www.telerik.com/kendo-vue-ui-develop/components/dropdowns/dropdownlist/custom-rendering)
* [Virtualization](https://www.telerik.com/kendo-vue-ui-develop/components/dropdowns/dropdownlist/virtualization)
* [Floating labels](https://www.telerik.com/kendo-vue-ui-develop/components/dropdowns/floating-labels)
* [Appearance](https://www.telerik.com/kendo-vue-ui-develop/components/dropdowns/dropdownlist/appearance)
* [Forms support](https://www.telerik.com/kendo-vue-ui-develop/components/dropdowns/dropdownlist/forms)
* [Common scenarios](https://www.telerik.com/kendo-vue-ui-develop/components/dropdowns/dropdownlist/common-scenarios)
* [Globalization](https://www.telerik.com/kendo-vue-ui-develop/components/dropdowns/globalization)
* [Keyboard navigation](https://www.telerik.com/kendo-vue-ui-develop/components/dropdowns/dropdownlist/keyboard-navigation)
* [Accessibility](https://www.telerik.com/kendo-vue-ui-develop/components/dropdowns/dropdownlist/accessibility/wai-aria-support)

> To learn more about the appearance, anatomy, and accessibility of the DropDownList, visit the [Progress Design System documentation](https://www.telerik.com/design-system/docs/components/dropdownlist/)—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](https://www.telerik.com/kendo-vue-ui-develop/components/dropdowns/dropdownlist#common-usage)
* [Enable item selection through the keyboard](https://www.telerik.com/kendo-vue-ui-develop/components/dropdowns/dropdownlist#looping-through-items)

### Common Usage

The following example demonstrates basic DropDownList events.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/dropdowns/dropdownlist/events/source.txt)

### 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](https://www.telerik.com/kendo-vue-ui/dropdownlist)
* [API Reference of the DropDownList Component](https://www.telerik.com/kendo-vue-ui-develop/components/dropdowns/api/dropdownlistprops)
* [Getting Started with Kendo UI for Vue - JavaScript (Online Guide)](https://www.telerik.com/kendo-vue-ui-develop/components/getting-started/javascript-composition-api)
* [Getting Started with Kendo UI for Vue - TypeScript (Online Guide)](https://www.telerik.com/kendo-vue-ui-develop/components/getting-started/typescript-composition-api)
* [Getting Started with Kendo UI for Vue - JavaScript + Options API (Online Guide)](https://www.telerik.com/kendo-vue-ui-develop/components/getting-started/javascript-options-api)
* [Getting Started with Kendo UI for Vue - TypeScript + Options API (Online Guide)](https://www.telerik.com/kendo-vue-ui-develop/components/getting-started/typescript-options-api)
* [Getting Started with Kendo UI for Vue - Nuxt 3 (Online Guide)](https://www.telerik.com/kendo-vue-ui-develop/components/getting-started/get-started-nuxt-3)
* [Virtual Classroom (Training Course for Registered Users)](https://learn.telerik.com/learn/course/internal/view/elearning/45/kendo-ui-for-vue-with-typescript)
* [DropDownList Forum](https://www.telerik.com/forums/kendo-ui-vue?searchText=dropdownlist)
* [Knowledge Base](https://www.telerik.com/kendo-vue-ui/components/knowledge-base/)
* [Kendo UI Productivity Tools extension for VS Code](https://www.telerik.com/kendo-vue-ui-develop/components/vscode-extension)

## Additional Resources

* [Vue Blogs](https://www.telerik.com/blogs/tag/kendo-ui-for-vue)
* [Kendo UI for Vue Roadmap](https://www.telerik.com/support/whats-new/kendo-vue-ui/roadmap)