@progress/kendo-react-dropdowns/README.md

React DropDowns offer an interface for users to select different items from a list and more. KendoReact Dropdowns package

[![KendoReact NPM Banner](https://raw.githubusercontent.com/telerik/kendo-react/master/images/kendoreact-github-banner.png)](https://www.telerik.com/kendo-react-ui/components/free?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-dropdowns&utm_content=banner)

# KendoReact DropDowns Library for React

> **Important**
>
> -   This package is а part of [KendoReact](https://www.telerik.com/kendo-react-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-dropdowns)—an enterprise-grade UI library with 120+ free and premium components.
> -   It contains both free and premium KendoReact components and tools. To use the premium components, you will need to [purchase a license](https://www.telerik.com/kendo-react-ui/pricing?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-dropdowns) or register for a [free trial](https://www.telerik.com/try/kendo-react-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-dropdowns). You can use the free components without having to sign up or get a license key.
> -   If you're looking for free React components, check out [Get Started with KendoReact Free](https://www.telerik.com/kendo-react-ui/components/free).
> -   If you have an active license, visit the [KendoReact My License page](https://www.telerik.com/kendo-react-ui/components/my-license/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-dropdowns) to learn how to configure your KendoReact licensing.
> -   Installing and working with this package indicates that you [accept the KendoReact License Agreement](https://www.telerik.com/purchase/license-agreement/progress-kendoreact?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-dropdowns).
>     The 30-day free trial gives you access to all KendoReact components and their full functionality. Additionally, for the period of your trial, you can use our legendary technical support provided directly by the KendoReact dev team!
>
> [Start using KendoReact](https://www.telerik.com/try/kendo-react-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-dropdowns) and speed up your development process!

The React DropDowns, part of KendoReact, offer a highly customizable interface for users to select different items from a list, search in large lists, and more. All KendoReact DropDowns are following the best accessibility standards.

How to start:

```sh
npm i @progress/kendo-react-dropdowns
```

What's in this package:

-   [React DropDowns Components Library Features](#react-dropdowns-components-library-features)
-   [React AutoComplete component (free)](#react-autocomplete-component)
-   [React ComboBox component (premium)](#react-combobox-component)
-   [React DropDownList component (free with premium features)](#react-dropdownlist-component)
-   [React DropDownTree component (premium)](#react-dropdowntree-component)
-   [React MultiColumnComboBox component (premium)](#react-multicolumncombobox-component)
-   [React MultiSelect component (free with premium features)](#react-multiselect-component)
-   [React MultiSelectTree component (premium)](#react-multiselecttree-component)

Additional information:

-   [Support Options](#support-options)
-   [Resources](#resources)
-   [KendoReact DropDowns API](https://www.telerik.com/kendo-react-ui/components/dropdowns/api)

## React DropDowns Components Library Features

Among the many features which the KendoReact DropDowns deliver are:

-   **Controlled state**—Control the value and popup state of the DropDowns.
-   **Filtering**—Filter the data of the DropDowns to easily find any value in a large dataset.
-   **Disabled state**—To disable user input or selection, just change a single property.
-   **Virtualization support**—The virtualization helps when displaying large sets of data.
-   **Custom rendering**—You can replace the value and the popup list item renders with custom ones.
-   **Setting the default value**—Easily configure the initial value that the DropDowns render.
-   **Form validation**—Validate the values, set validation requirements, and prevent the submission of forms which are in invalid state.
-   **Accessibility support**—The DropDowns are compliant with WAI-ARIA, Section 508, and provide keyboard navigation.
-   [Theme support](https://www.telerik.com/kendo-react-ui/components/styling/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-dropdowns)—The KendoReact DropDowns, as well as all 120+ components in the KendoReact suite, are styled in four polished themes (Bootstrap, Material, Fluent, and Default) and can be further customized to match your specific design guidelines.

## React AutoComplete Component

> This is a **free React component**—no sign-up or license required.

[The KendoReact AutoComplete component](https://www.telerik.com/kendo-react-ui/components/dropdowns/autocomplete/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-dropdowns) is part of KendoReact Free and lets your end users type text into an input element and a list of suggested items will appear in a popup beneath. With suggestions turned on, the React AutoComplete will fill in the input field with suggestions from the underlying data, saving the user a lot of time when selecting data in the AutoComplete.

How to use the AutoComplete component in your apps:

```tsx
import { AutoComplete } from '@progress/kendo-react-dropdowns';
...
/**
* Provide the data to populate the list of suggestions.
*/
<Autocomplete
    data={data}
/>
```

## React ComboBox Component

> This is a KendoReact **premium component** and requires a commercial license or an active trial license.

[The KendoReact ComboBox component](https://www.telerik.com/kendo-react-ui/components/dropdowns/combobox/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-dropdowns) is part of KendoReact and is a form component designed to let end users choose a predefined value from a list, and often is used as a much richer version of the select HTML element. Initially popularized by Material Design, Floating Labels have become so popular that almost any input can take advantage of their sleek look and feel. With the suggestion feature enabled, the KendoReact ComboBox will attempt to autofill the input element based on the closest available value.

How to use the ComboBox component in your apps:

```tsx
import { ComboBox } from '@progress/kendo-react-dropdowns';
...
/**
* Provide the data to populate the choices in the ComboBox.
*/
<ComboBox
    data={data}
/>
```

## React DropDownList Component

> This is a **free React component** with premium filtering and virtualization. The free feature set does not require any sign-up or license. The premium filtering and virtualization require a commercial license or an active trial license.

[The KendoReact DropDownList component](https://www.telerik.com/kendo-react-ui/components/dropdowns/dropdownlist/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-dropdowns) is a form component that enables end users to choose a single predefined value from a list, without support for typing in values, and is a richer form of the select element. The KendoReact DropDownList can be bound to various forms of data, including datasets of objects, an array of primitive values or binding directly to a single value property. Additionally, the React DropDown List can bind separate fields to the displayed text and the underlying value. By Default, the KendoReact DropDownList will render an empty area if no value has been displayed. Some requirements may call for some sort of placeholder string indicating what the DropDownList component is for, which is where the default item feature comes in.

How to use the DropDownList component in your apps:

```tsx
import { DropDownList } from '@progress/kendo-react-dropdowns';
...
/**
* Provide the data to populate the choices in the DropDownList.
*/
<DropDownList
    data={data}
/>
```

## React DropDownTree Component

> This is a KendoReact **premium component** and requires a commercial license or an active trial license.

A combination of a TreeView and a DropDown component, [the KendoReact DropDownTree component](https://www.telerik.com/kendo-react-ui/components/dropdowns/dropdowntree/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-dropdowns) is perfect for forms that need to display complex data concisely. When users interact with this simple input element, the dropdown opens up to reveal a built-in TreeView with a hierarchical structure.

How to use the DropDownTree component in your apps:

```tsx
import { DropDownTree } from '@progress/kendo-react-dropdowns';
...
/**
* Provide the data to populate the choices in the DropDownTree.
*/
<DropDownTree
    data={data}
/>
```

## React MultiColumnComboBox Component

> This is a KendoReact **premium component** and requires a commercial license or an active trial license.

[The KendoReact MultiColumnComboBox component](https://www.telerik.com/kendo-react-ui/components/dropdowns/multicolumncombobox/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-dropdowns) provides a dropdown component that displays information about items in multiple fields arranged in columns. The KendoReact MultiColumn ComboBox comes with filtering, grouping, virtualization and more handy features. When handling larger sets of data, it is very helpful to organize information in categories. With grouping enabled, the React MultiColumn ComboBox can group all data items by a particular field.

How to use the MultiColumnComboBox component in your apps:

```tsx
import { MultiColumnComboBox } from '@progress/kendo-react-dropdowns';
...
/**
* Provide the data to populate the columns in the MultiColumnComboBox.
* Define the columns for the MultiColumnComboBox.
*/
<MultiColumnComboBox
    data={data}
    columns={columns}
/>
```

## React MultiSelect Component

> This is a **free React component** with premium filtering and virtualization. The free feature set does not require any sign-up or license. The premium filtering and virtualization require a commercial license or an active trial license.

[The KendoReact MultiSelect component](https://www.telerik.com/kendo-react-ui/components/dropdowns/multiselect/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-dropdowns) is a form component that displays a list of options in a popup and allows for multiple items to be selected from this list. Each selected item is rendered as a tag in the input element. With the custom tags feature, the MultiSelect can customize what to display when an item is selected, including having a single tag representing all selected items.

How to use the MultiSelect component in your apps:

```tsx
import { MultiSelect } from '@progress/kendo-react-dropdowns';
...
/**
* Provide the data to populate the contents of the MultiSelect.
*/
<MultiSelect
    data={data}
/>
```

## React MultiSelectTree Component

> This is a KendoReact **premium component** and requires a commercial license or an active trial license.

[The KendoReact MultiSelectTree component](https://www.telerik.com/kendo-react-ui/components/dropdowns/multiselecttree/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-dropdowns) is a form component that lets you choose multiple predefined values from a hierarchical list and is a richer version of the Select element. The component supports filtering, custom rendering, keyboard navigation, expand and collapse of the hierarchical data items.

How to use the MultiSelect component in your apps:

```tsx
import { MultiSelectTree } from '@progress/kendo-react-dropdowns';
...
/**
* Provide the data to populate the contents of the MultiSelectTree.
*/
<MultiSelectTree
    data={data}
/>
```

## Support Options

For any issues you might encounter while working with the KendoReact DropDowns, use any of the available support channels:

-   Industry-leading technical support&mdash;KendoReact paid license holders and users with an active (free) trial license can take advantage of our outstanding customer support. To submit a ticket, use [the dedicated KendoReact support system](https://www.telerik.com/account/support-center/contact-us/technical-support?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-dropdowns).
-   Product forums&mdash;The [KendoReact forums](https://www.telerik.com/forums/kendo-ui-react?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-dropdowns) are part of the free support you can get from the community and from the KendoReact team.
-   Feedback portal&mdash;The [KendoReact feedback portal](https://feedback.telerik.com/kendo-react-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-dropdowns) is where you can request and vote for new features to be added.

## Resources

-   [Getting Started with KendoReact](https://www.telerik.com/kendo-react-ui/components/getting-started/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-dropdowns)
-   [Get Started with KendoReact Free](https://www.telerik.com/kendo-react-ui/components/free)
-   [Getting Started with the KendoReact DropDowns](https://www.telerik.com/kendo-react-ui/components/dropdowns/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-dropdowns)
-   [API Reference of the KendoReact DropDowns](https://www.telerik.com/kendo-react-ui/components/dropdowns/api/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-dropdowns)
-   [KendoReact Roadmap](https://www.telerik.com/support/whats-new/kendo-react-ui/roadmap?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-dropdowns)
-   [Blogs](https://www.telerik.com/blogs/tag/kendoreact?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-dropdowns)
-   [Demos, documentation, and component reference](https://www.telerik.com/kendo-react-ui/components/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-dropdowns)
-   [KendoReact pricing and licensing](https://www.telerik.com/kendo-react-ui/pricing?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-dropdowns)
-   [Changelog](https://www.telerik.com/kendo-react-ui/components/changelogs/ui-for-react/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-dropdowns)

High-level component overview pages

-   [React AutoComplete Component](https://www.telerik.com/kendo-react-ui/autocomplete)
-   [React ComboBox Component](https://www.telerik.com/kendo-react-ui/combobox)
-   [React DropDownList Component](https://www.telerik.com/kendo-react-ui/dropdownlist)
-   [React DropDownTree Component](https://www.telerik.com/kendo-react-ui/dropdowntree)
-   [React MultiColumnComboBox Component](https://www.telerik.com/kendo-react-ui/multicolumncombobox)
-   [React MultiSelect Component](https://www.telerik.com/kendo-react-ui/multiselect)
-   [React MultiSelectTree Component](https://www.telerik.com/kendo-react-ui/multiselecttree)

_Copyright © 2025 Progress Software Corporation and/or its subsidiaries or affiliates. All Rights Reserved._

_Progress, Telerik, and certain product names used herein are trademarks or registered trademarks of Progress Software Corporation and/or one of its subsidiaries or affiliates in the U.S. and/or other countries._