# Angular Dropdowns Overview

The Kendo UI for Angular Dropdowns are components for displaying predefined lists of options.

They include a variety of drop-down types and styles that have extensive configuration options. This flexibility allows you to quickly and easily create the exact Dropdowns component you need to fit your specific requirements for functionality and appearance.

> tip **Jumpstart Your DropDowns** <br/><br/> With the Agentic UI Generator, you can build components and layouts using natural language prompts — directly inside AI-powered IDEs like VS Code and Cursor. Get intelligent assistance with component implementation, styling, layout design, and iconography powered by our documentation and APIs. <br/><br/>[Try the Agentic UI Generator](https://www.telerik.com/kendo-angular-ui/components/ai-tools/agentic-ui-generator/getting-started)

The Dropdowns are built from the ground up and specifically for Angular, so that you get high-performance drop-down controls which integrate tightly with your application and with the rest of the Kendo UI for Angular components.



<Row>
  <Column count={6}>
    <Component href="/dropdowns/autocomplete">
      <svg id="autocomplete" viewBox="0 0 72 72">
        <path d="M60,57.5L51.5,66H12V18H6v54h48l12-12V15h-6V57.5z M18,21v6h30l6-6H18z M54,33H18v6h30L54,33z M18,51h18l6-6H18
	      V51z M42,3v6h24l6-6H42z M0,0h36v12H0V0z" />
      </svg>
      <ComponentTitle>AutoComplete</ComponentTitle>
      <ComponentDescription>A list of suggestions for typed content.</ComponentDescription>
    </Component>
  </Column>
  <Column count={6}>
    <Component href="/dropdowns/combobox">
      <svg id="combobox" viewBox="0 0 72 72">
        <path d="M66,12v48L54,72H12H6v-6V12h6v54h39.5l8.5-8.5V12H66z M18,24h30l6-6H18V24z M54,6h12l6-6H54V6z M0,6h48V0H0V6z
	      M18,36h30l6-6H18V36z M18,48h18l6-6H18V48z" />
      </svg>
      <ComponentTitle>ComboBox</ComponentTitle>
      <ComponentDescription>A list for picking predefined items or entering custom values.</ComponentDescription>
    </Component>
  </Column>
  <Column count={6}>
    <Component href="/dropdowns/dropdownlist">
      <svg id="dropdownlist" viewBox="0 0 72 72">
        <path d="M60,57.5L51.5,66H12V12H6v54v6h6h42l12-12V12h-6V57.5z M18,18v6h30l6-6H18z M0,0v6h66l6-6H0z M18,36h30l6-6H18
	      V36z M18,48h18l6-6H18V48z" />
      </svg>
      <ComponentTitle>DropDownList</ComponentTitle>
      <ComponentDescription>A predefined list of options for picking single values.</ComponentDescription>
    </Component>
  </Column>
  <Column count={6}>
    <Component href="/dropdowns/dropdowntree">
      <ComponentIcon>
        <svg id="dropdowntree" viewbox="0 0 24 24">
          <path d="M13,10v1h4l1-1H13z M15,13h-3v3h3V13z M16,14v1h1l1-1H16z M20,19.2L17.2,22H4V4H2v20h16l4-4l0,0V4h-2V19.2z M18,18h-5v1h4  L18,18z M9,12h3V9H9V12z M0,0v2h22l2-2H0z M10,6v1h7l1-1H10z M6,8h3V5H6V8z M9,20h3v-3H9V20z" />
        </svg>
      </ComponentIcon>
      <ComponentTitle>DropDownTree</ComponentTitle>
      <ComponentDescription>A predefined list rendered in a tree-like structure for single item selection.</ComponentDescription>
    </Component>
  </Column>
  <Column count={6}>
    <Component href="/dropdowns/multicolumncombobox">
      <ComponentIcon>
        <path d="M18,0v2h4l2-2H18z M20,18.2L17.2,21H4V4H2v19h16l4-4V4h-2V18.2z M16,0H0v2h16V0z M15,6v1h-2V6h-2v1H9V6H7v1H6v2h1v2H6v2h1v2  H6v2h1v2l2-2h2v2l2-2h2v2l4-4h-2v-2l2-2h-2V9l2-2h-2V6H15z M11,15H9v-2h2V15z M11,11H9V9h2V11z M15,15h-2v-2h2V15z M15,11h-2V9h2V11  z"/>
      </ComponentIcon>
      <ComponentTitle>MultiColumnComboBox</ComponentTitle>
      <ComponentDescription>A table-structured list for picking predefined items or entering custom values.</ComponentDescription>
    </Component>
  </Column>
  <Column count={6}>
    <Component href="/dropdowns/multiselect">
      <svg id="multiselect" viewBox="0 0 72 72">
        <path d="M60,57.5L51.5,66H12V24H6v42v6h6h42l12-12V24h-6V57.5z M54,30H18v6h30L54,30z M0,18h66l6-6H0V18z M18,48h18l6-6
	      H18V48z M72,0H30v6h36L72,0z M0,0h24v6H0V0z" />
      </svg>
      <ComponentTitle>MultiSelect</ComponentTitle>
      <ComponentDescription>A predefined list of options for multiple item selection.</ComponentDescription>
    </Component>
  </Column>
  <Column count={6}>
    <Component href="/dropdowns/multiselecttree">
      <ComponentIcon>
        <path d="M13,10v1h4l1-1H13z M15,13h-3v3h3V13z M16,14v1h1l1-1H16z M20,19.2L17.2,22H4V4H2v20h16l4-4l0,0V4h-2V19.2z M18,18h-5v1h4
	      L18,18z M9,12h3V9H9V12z M0,0v2h22l2-2H0z M10,6v1h7l1-1H10z M6,8h3V5H6V8z M9,20h3v-3H9V20z"/>
      </ComponentIcon>
      <ComponentTitle>MultiSelectTree</ComponentTitle>
      <ComponentDescription>A predefined list rendered in a tree-like structure for multiple item selection.</ComponentDescription>
    </Component>
  </Column>
</Row>

## Angular Dropdowns Example

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/dropdowns/overview/source.txt)

## Angular Dropdowns Key Features

Each Kendo UI for Angular Dropdowns component delivers a range of handy and developer-friendly features whose number and further development are not limited by the list in this section. The Kendo UI for Angular team constantly invests efforts to improve the performance and add more value to the existing Dropdowns library as well as develop new features and controls to it.

### Data Binding

The Dropdowns support the binding of their data to lists of possible values which can contain primitive (strings and numbers) or complex (objects) items. [Read more about the data binding of the AutoComplete...](https://www.telerik.com/kendo-angular-ui/components/dropdowns/autocomplete/data-binding)

### Forms Support

All Dropdowns provide support both for the asynchronous template-driven Angular forms and the predominantly synchronous reactive Angular forms. This feature allows you to draw on the logic set either in the template, or in the component or typescript code. [Read more about the forms support of the AutoComplete...](https://www.telerik.com/kendo-angular-ui/components/dropdowns/autocomplete/forms)

### Filtering

Apart from their built-in filter functionality, the Dropdowns provide further options for fine-tuning and customizing the mechanism such as setting a minimum length of the search symbols, using the built-in filter directive, and more. [Read more about filtering the AutoComplete items...](https://www.telerik.com/kendo-angular-ui/components/dropdowns/autocomplete/filtering)

### Virtualization

All Kendo UI for Angular Dropdowns that do not visualize hierarchical data in their popups provide a virtualization option which significantly improves the performance when working with large datasets. [Read more about the virtualization functionality in the AutoComplete...](https://www.telerik.com/kendo-angular-ui/components/dropdowns/autocomplete/virtualization)

### Grouping

All Kendo UI for Angular Dropdowns that do not visualize hierarchical data in their popups provide a grouping option. [Read more about the grouping functionality in the AutoComplete...](https://www.telerik.com/kendo-angular-ui/components/dropdowns/autocomplete/grouping)

### Disabled Options

You can choose to disable some of the predefined list options of the Dropdowns so that, if need be present, users will not be able to interact with them. [Read more about the disabled options in the AutoComplete...](https://www.telerik.com/kendo-angular-ui/components/dropdowns/autocomplete/disabled-items)

### Adaptive Mode

All Kendo UI for Angular Dropdowns support a mobile-friendly rendering mode of their popups. Enabling the adaptive mode allows the components to automatically fit to the current screen size. [Read more about the adaptive mode in the AutoComplete...](https://www.telerik.com/kendo-angular-ui/components/dropdowns/autocomplete/adaptive-mode)

### Appearance

Each Kendo UI for Angular Dropdowns component offers extensive customization options, allowing you to tailor the look and feel to your preferences (size, border radius, and fill modes) for a refined and cohesive design. [Read more about the customazible appearance of the AutoComplete...](https://www.telerik.com/kendo-angular-ui/components/dropdowns/autocomplete/appearance)

### Templates

You can visually customize the content and the general look and feel of the items and elements list by utilizing the ready-to-use header, footer, and other templates. [Read more about the templates used by the AutoComplete...](https://www.telerik.com/kendo-angular-ui/components/dropdowns/autocomplete/templates)

### Globalization

The Kendo UI for Angular Dropdowns support globalization to ensure that they can fit well in any application, no matter what languages and locales need to be supported. Additionally, the Dropdowns support rendering in a right-to-left (RTL) direction. [Read more about Dropdowns globalization...](https://www.telerik.com/kendo-angular-ui/components/dropdowns/globalization)

### Accessibility

The Dropdowns are accessible for screen readers and support WAI-ARIA attributes. [Read more about accessibility support of the AutoComplete...](https://www.telerik.com/kendo-angular-ui/components/dropdowns/autocomplete/accessibility)

### Keyboard Navigation

The Dropdowns support a number of keyboard shortcuts which allow users to accomplish various commands. [Read more about the keyboard navigation of the AutoComplete...](https://www.telerik.com/kendo-angular-ui/components/dropdowns/autocomplete/keyboard-navigation)

## Licensing

The Kendo UI for Angular Dropdowns are part of the Kendo UI for Angular library. Kendo UI for Angular offers a 30-day trial with a full-featured version of the library—no restrictions! What’s more, you are eligible for full technical support during your trial period in case you have any questions. Sign up for a [free 30-day trial](https://www.telerik.com/download-login-v2-kendo-angular-ui) of Kendo UI for Angular.

## Support Options

For any questions about the use of Kendo UI for Angular Dropdowns, or any of our other components, there are [several support options available](https://www.telerik.com/support/kendo-ui-for-angular):

* Kendo UI license holders and anyone in an active trial can take advantage of the Kendo UI for Angular outstanding customer support delivered by the actual developers who built the library. To submit a support ticket, use the [Kendo UI support system](https://www.telerik.com/account/support-tickets).
* [Kendo UI for Angular forums](https://www.telerik.com/forums/kendo-angular-ui) are part of the free support you can get from the community and from the Kendo UI  team on all kinds of general issues.
* [Kendo UI for Angular feedback portal](https://feedback.telerik.com/kendo-angular-ui) and [Kendo UI for Angular roadmap](https://www.telerik.com/kendo-angular-ui/roadmap/) provide information on the features in discussion and also the planned ones for release.
* Kendo UI for Angular uses [GitHub Issues](https://github.com/telerik/kendo-angular/issues) as its bug tracker and you can submit any related reports there. Also, check out the [closed list](https://github.com/telerik/kendo-angular/issues?q=is%3Aissue+is%3Aclosed).
* Of course, the Kendo UI for Angular team is active on [StackOverflow](https://stackoverflow.com/questions/tagged/kendo-ui-angular2) as well and you can find a wealth of questions and answers there.
* Need something unique that is tailor-made for your project? Progress offers its [Progress Services](https://www.progress.com/services) group that can work with you to create any customized solution that you might need.

## Learning Resources

* [Getting Started with the Kendo UI for Angular Dropdowns](https://www.telerik.com/kendo-angular-ui/components/dropdowns/installation/getting-started)
* [API Reference of the Dropdowns](https://www.telerik.com/kendo-angular-ui/components/dropdowns/api)
* [Getting Started with Kendo UI for Angular (Online Guide)](https://www.telerik.com/kendo-angular-ui/components/getting-started)
* [Video Courses](https://www.telerik.com/kendo-angular-ui/components/getting-started/video-onboarding)
* [Kendo UI for Angular Forum](https://www.telerik.com/forums/kendo-angular-ui)
* [Before You Start: All Things Angular (Telerik Blog Post)](https://www.telerik.com/blogs/all-things-angular)
* [Angular Blogs](https://www.telerik.com/blogs/tag/kendo-ui-for-angular)
* [Knowledge Base](https://www.telerik.com/kendo-angular-ui/components/knowledge-base)