# React Dropdowns Overview

The KendoReact 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-react-ui/components/ai-tools/agentic-ui-generator/getting-started)



## React Dropdowns Example

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

## Available Components

#### Free React Dropdowns

<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>
</Row>

#### Premium React Dropdowns

<Row>
   <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 single items or entering custom values.</ComponentDescription>
        </Component>
    </Column>
    <Column count={6}>
        <Component href="/dropdowns/multicolumncombobox">
            <svg id="multicolumncombobox" viewbox="0 0 24 24">
                <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-2V9h2V11z"/>
            </svg>
            <ComponentTitle>MultiColumnComboBox</ComponentTitle>
            <ComponentDescription>A list for picking single items or entering custom values.</ComponentDescription>
        </Component>
    </Column>
    <Column count={6}>
        <Component href="/dropdowns/dropdowntree">
            <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>
            <ComponentTitle>DropDownTree</ComponentTitle>
            <ComponentDescription>A predefined hierarchical list of options.</ComponentDescription>
        </Component>
    </Column>
        <Column count={6}>
        <Component href="/dropdowns/multiselecttree">
            <svg id="multiselecttree" 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>
            <ComponentTitle>MultiSelectTree</ComponentTitle>
            <ComponentDescription>A predefined hierarchical list of options.</ComponentDescription>
        </Component>
    </Column>
</Row>

#### Free React Dropdowns with Premium Features

<Row>
    <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/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>
</Row>

## React Dropdowns Key Features

Each KendoReact Dropdowns component delivers a range of developer-friendly features whose number and further development are not limited by the list in this section.

### Appearance

The Dropdowns provide highly customizable and easy-to-style appearance options, including [built-in themes](https://www.telerik.com/kendo-react-ui/components/styling), [theme customization](https://www.telerik.com/kendo-react-ui/components/styling/customizing), [custom themes](https://www.telerik.com/kendo-react-ui/components/styling/theme-builder), and an [unstyled mode](https://www.telerik.com/kendo-react-ui/components/styling/unstyled) for full control over the rendered markup. [Read more about the appearance of the AutoComplete...](https://www.telerik.com/kendo-react-ui/components/dropdowns/autocomplete/appearance)

### Data Binding

The Dropdowns support binding their data to lists of primitive or complex values. [Read more about the data binding of the AutoComplete...](https://www.telerik.com/kendo-react-ui/components/dropdowns/autocomplete/binding)

### Disabled Items

You can disable specific items in the predefined list of options so that users cannot interact with them. [Read more about the disabled items of the AutoComplete...](https://www.telerik.com/kendo-react-ui/components/dropdowns/autocomplete/disabled-item)

### Adaptive Mode

The Dropdowns support a mobile-friendly rendering mode for their popups by enabling the `adaptive` prop, which automatically adapts the popup to the current screen size. [Read more about the adaptive rendering of the AutoComplete...](https://www.telerik.com/kendo-react-ui/components/dropdowns/autocomplete/adaptive-rendering)

### Grouping

The Dropdowns let you display grouped data by organizing the predefined list of options based on a specified field. [Read more about the grouping of the AutoComplete...](https://www.telerik.com/kendo-react-ui/components/dropdowns/autocomplete/grouping)

### Forms Support

The Dropdowns provide built-in support for form validation. [Read more about the forms support of the AutoComplete...](https://www.telerik.com/kendo-react-ui/components/dropdowns/autocomplete/forms)

### Globalization

The Dropdowns support globalization to ensure that they fit well in any application, no matter what languages and locales need to be supported. [Read more about the globalization of the Dropdowns...](https://www.telerik.com/kendo-react-ui/components/dropdowns/globalization)

### Accessibility and Keyboard Navigation

The Dropdowns are accessible for screen readers, support WAI-ARIA attributes, and provide a number of keyboard shortcuts that let users accomplish various commands. [Read more about the accessibility of the AutoComplete...](https://www.telerik.com/kendo-react-ui/components/dropdowns/autocomplete/accessibility/wai-aria-support)

## Licensing

The KendoReact Dropdowns package provides both [free components](https://www.telerik.com/kendo-react-ui/components/dropdowns#free-react-dropdowns) and [premium components](https://www.telerik.com/kendo-react-ui/components/dropdowns#premium-react-dropdowns). The free components can be used without any license or registration, while the premium components require a commercial license key or an active trial license key. The Dropdowns package is part of the KendoReact library, which offers a 30-day trial with a full-featured version of the library—no restrictions! Sign up for a [free trial](https://www.telerik.com/try/kendo-react-ui) of KendoReact.

## Frequently Asked Questions

### Are the KendoReact Dropdowns Free to Use

The KendoReact Dropdowns provide both [free React dropdowns](https://www.telerik.com/kendo-react-ui/components/dropdowns#free-react-dropdowns) and [premium dropdowns](https://www.telerik.com/kendo-react-ui/components/dropdowns#premium-react-dropdowns) which require a commercial license key or an active trial license key.

You can start using the free components without any license or registration with Progress or Telerik.

### How to Create Dropdowns in React

To create a dropdown in React, you need to install the KendoReact dropdowns package and then import the respective dropdown components in your application. After that, you can use the various available dropdown components in your React application. For more information, refer to the [Getting Started with the KendoReact Dropdowns](https://www.telerik.com/kendo-react-ui/components/dropdowns/get-started) article.

### How to Upgrade to the Premium Dropdowns

If you want to use any of the premium [React dropdowns](https://www.telerik.com/kendo-react-ui/components/dropdowns#premium-react-dropdowns), UI components, or component features, you need a valid commercial license or an active trial license. A [free trial](https://www.telerik.com/try/kendo-react-ui) is available, if you want to try out the premium features before purchase.

## Support Options

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

* KendoReact license holders and anyone in an active trial can take advantage of the outstanding KendoReact customer support delivered by the developers who built the library. To submit a support ticket, use the [Kendo UI support system](https://www.telerik.com/account/support-tickets).
* The [KendoReact forums](https://www.telerik.com/forums/kendo-ui-react) are part of the free support you can get from the community and from the KendoReact team on all kinds of general issues.
* [KendoReact Feedback Portal](https://feedback.telerik.com/kendo-react-ui) and [KendoReact Roadmap](https://www.telerik.com/support/whats-new/kendo-react-ui/roadmap) provide information on the features in discussion and also those planned for release.
* KendoReact uses [GitHub Issues](https://github.com/telerik/kendo-react) as its bug tracker, and you can submit any related reports there. Also, check out the [closed list](https://github.com/telerik/kendo-react/issues?q=is%3Aissue+is%3Aclosed).
* 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 KendoReact](https://www.telerik.com/kendo-react-ui/components/getting-started)
* [Getting Started with the KendoReact Dropdowns](https://www.telerik.com/kendo-react-ui/components/dropdowns/get-started)
* [API Reference of the KendoReact Dropdowns](https://www.telerik.com/kendo-react-ui/components/dropdowns/api)
* [KendoReact Free vs. Premium](https://www.telerik.com/kendo-react-ui/components/getting-started/free-vs-premium)
* [Video Courses](https://www.telerik.com/kendo-react-ui/components/getting-started/video-onboarding)
* [Before You Start: All Things React (Telerik Blog Post)](https://www.telerik.com/blogs/all-things-react)
* [Knowledge Base](https://www.telerik.com/kendo-react-ui/components/knowledge-base)