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

Kendo UI DropDowns wrapper for React

---
title: Overview
page_title: Overview - ComboBox - Kendo UI Wrappers for React
description: "Get an overview of the features the Kendo UI ComboBox delivers and use the wrapper in React projects."
slug: overview_combobox
position: 1
---

# ComboBox Overview

The ComboBox is a richer version of the `<select>` element and allows the user to choose from a list of options or enter custom values through the keyboard.

The ComboBox wrapper for React is a client-side wrapper for the [Kendo UI ComboBox](http://docs.telerik.com/kendo-ui/api/javascript/ui/combobox) widget.

## Basic Usage

The following example demonstrates the ComboBox in action.

```jsx-preview
class ComboBoxContainer extends React.Component {
    constructor(props) {
        super(props);
        this.dataSource = new kendo.data.DataSource({
            data: props.data
        })
        this.placeholder = "Enter a fruit..."
    }

    render() {
        return (
            <div className="row">
                <div className="col-xs-12 col-sm-6 example-col">
                   <ComboBox
                        dataSource={this.dataSource}
                        placeholder={this.placeholder}/>
                </div>
            </div>
        );
    }
}
ReactDOM.render(
    <ComboBoxContainer data={["Apples","Oranges"]}/>,
    document.querySelector('my-app')
);
```

## Features and Functionalities

* [Data binding]({% slug databinding_combobox %})
* [Templates]({% slug templates_combobox %})
* [Grouping]({% slug grouping_combobox %})
* [Virtualization]({% slug virtualization_combobox %})

## Events

The following example demonstrates basic ComboBox events. You can subscribe to [all ComboBox events](https://docs.telerik.com/kendo-ui/api/javascript/ui/combobox#events) by the handler name.

```jsx
class ComboBoxContainer extends React.Component {
    constructor(props) {
        super(props);
        this.dataSource = new kendo.data.DataSource({
            data: props.data
        })
        this.onChange = this.onChange.bind(this);
        this.onOpen = this.onOpen.bind(this);
        this.onFilter = this.onFilter.bind(this);
        this.onClose = this.onClose.bind(this);
        this.onSelect = this.onSelect.bind(this);
        this.onDataBound = this.onDataBound.bind(this);
    }

    onChange = (e) => {
         console.log("event :: change");
    }

    onOpen = (e) => {
        console.log("event :: open");
    }

    onClose = (e) => {
        console.log("event :: close");
    }

    onSelect= (e) => {
        var dataItem = e.dataItem;
        console.log("event :: select (" + dataItem + ")" );
    }

    onDataBound = (e) => {
        console.log("event :: dataBound");
    }

    onFilter = (e) => {
        console.log("event :: filter");
    };

    render() {
        return (
            <div className="row">
                <div className="col-xs-12 col-sm-6 example-col">
                   <ComboBox
                        change={this.onChange}
                        open={this.onOpen}
                        filtering={this.onFilter}
                        close={this.onClose}
                        select={this.onSelect}
                        dataBound={this.onDataBound}
                        dataSource={this.dataSource}/>
                </div>
            </div>
        );
    }
}
ReactDOM.render(
    <ComboBoxContainer data={["Baseball", "Basketball", "Cricket", "Field Hockey", "Football", "Table Tennis", "Tennis", "Volleyball"]}/>,
    document.querySelector('my-app')
);
```

## Suggested Links

* [Kendo UI ComboBox for jQuery](https://docs.telerik.com/kendo-ui/controls/editors/combobox/overview)
* [API Reference of the ComboBox Widget](https://docs.telerik.com/kendo-ui/api/javascript/ui/combobox)