@progress/kendo-dropdowns-react-wrapper/docs/index.md

Kendo UI DropDowns wrapper for React

---
title: Overview
page_title: DropDowns Overview - Components - Kendo UI Wrappers for React
description: "Learn about the Kendo UI wrappers for React which are delivered by the DropDowns package."
slug: overview_dropdowns
position: 0
---

# DropDowns Overview

The DropDowns allow you to choose from a predefined list of options.

<div class="row components-overview-list mt-70 mb-50 pb-50 separator-bottom">
<a href="{% slug overview_autocomplete %}" class="col-md-3">
<svg id="autocomplete" viewbox="0 0 72 72">
  <defs>
    <linearGradient id="gradient" gradientUnits="userSpaceOnUse" x1="-3.8848" y1="56.8728" x2="74.8848" y2="11.3951">
        <stop  offset="0" style="stop-color:#FF9B5E"/>
        <stop  offset="8.618834e-02" style="stop-color:#FF8C5D"/>
        <stop  offset="0.1949" style="stop-color:#FF7F5B"/>
        <stop  offset="0.3" style="stop-color:#FF7B5B"/>
        <stop  offset="0.7" style="stop-color:#FF6358"/>
        <stop  offset="0.7835" style="stop-color:#FC5F59"/>
        <stop  offset="0.8701" style="stop-color:#F4525E"/>
        <stop  offset="0.9577" style="stop-color:#E63E65"/>
        <stop  offset="1" style="stop-color:#DD3169"/>
    </linearGradient>
  </defs>
  <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>
<div class="h4 mt-10 mb-5">AutoComplete</div>
<p>A list of suggestions for typed content.</p>
</a>
<a href="{% slug overview_combobox %}" class="col-md-3">
<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>
<div class="h4 mt-10 mb-5">ComboBox</div>
<p>A list for picking single items or entering custom values.</p>
</a>
<a href="{% slug overview_dropdownlist %}" class="col-md-3">
<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>
<div class="h4 mt-10 mb-5">DropDownList</div>
<p>A predefined list of options for picking single values.</p>
</a>
<a href="{% slug overview_multiselect %}" class="col-md-3">
<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>
<div class="h4 mt-10 mb-5">MultiSelect</div>
<p>A predefined list of options for multiple item selection.</p>
</a>
</div>

## Basic Usage

The following example demonstrates the AutoComplete, ComboBox, DropDownList, and MultiSelect in action.

{% meta height:320 %}
```jsx-preview
class DropDownListContainer extends React.Component {
    constructor(props) {
            super(props);
            this.dataSource = new kendo.data.DataSource({
                data: props.data
            })
        this.value = props.value
    }

    render() {
        return (
            <div className="example-wrapper">
                <div className="col-xs-12 col-sm-6 example-col">
                   <p>DropDownList</p>
                   <DropDownList dataSource={this.dataSource}/>
                </div>
                <div className="col-xs-12 col-sm-6 example-col">
                   <p>ComboBox</p>
                   <ComboBox dataSource={this.dataSource}/>
                </div>
                <div className="col-xs-12 col-sm-6 example-col">
                   <p>AutoComplete</p>
                   <AutoComplete dataSource={this.dataSource}/>
                </div>
                <div className="col-xs-12 col-sm-6 example-col">
                    <p>MultiSelect</p>
                    <MultiSelect dataSource={this.dataSource} value={this.value}/>
                </div>                  
            </div>
        );
    }
}
ReactDOM.render(
    <DropDownListContainer data={["Baseball", "Basketball", "Cricket", "Field Hockey", "Football", "Table Tennis", "Tennis", "Volleyball"]} value={['Basketball', 'Cricket']}/>,
    document.querySelector('my-app')
);
```
{% endmeta %}

## Installation

All components that you reference during the installation will be present in the final bundle of your application. To avoid ending up with components you do not actually need, import from the package only the desired component.

1. Download and install the package.

    ```sh
        npm install --save @progress/kendo-dropdowns-react-wrapper
    ```

2. Once installed, import the desired component from the package.

    ```sh
        import { AutoComplete } from '@progress/kendo-dropdowns-react-wrapper';
    ```

    The package also exports the following individual components:

      * AutoComplete
      * ComboBox
      * DropDownList
      * MultiSelect

3. You are required to install one of the Kendo UI themes to style your components.

## Dependencies

The DropDowns package requires you to install the following [peer dependencies](https://nodejs.org/en/blog/npm/peer-dependencies/) in your application:

* @progress/kendo-ui

## Suggested Links

* [Get Started with the AutoComplete]({% slug overview_autocomplete %})
* [Get Started with the ComboBox]({% slug overview_combobox %})
* [Get Started with the DropDownList]({% slug overview_dropdownlist %})
* [Get Started with the MultiSelect]({% slug overview_multiselect %})