All Components

This website hosts native Kendo UI components built from the ground up with the ultimate performance in mind and intended to be used in the React ecosystem.

ComboBox Overview

The ComboBox is a form component that lets you choose a single predefined value from a list.

It is a richer version of the <select> element and supports filtering, virtualization, and entering of custom values.

Basic Usage

The following example demonstrates the ComboBox in action.

import React from 'react';
import ReactDOM from 'react-dom';

import { ComboBox } from '@progress/kendo-react-dropdowns';

class AppComponent extends React.Component {
    sports = [ "Baseball", "Basketball", "Cricket", "Field Hockey", "Football", "Table Tennis", "Tennis", "Volleyball" ];
    state = {
        allowCustom: true
    };

    onChange = (event) => {
        this.setState({
            allowCustom: event.target.checked
        });
    }

    render() {
        const allowCustom = this.state.allowCustom;
        return (
            <div className="example-wrapper">
                <div className="example-config">
                    <input id="ac" type="checkbox" className="k-checkbox" onChange={this.onChange} checked={allowCustom} />
                    <label className="k-checkbox-label" for="ac">Allow custom values</label>
                </div>
                <div>
                    <div>Favorite sport:</div>
                    <ComboBox data={this.sports} allowCustom={allowCustom} />
                </div>
            </div>
        );
    }
}

ReactDOM.render(
    <AppComponent />,
    document.querySelector('my-app')
);

Functionality and Features

Events

The following example demonstrates basic ComboBox events.

import React from 'react';
import ReactDOM from 'react-dom';
import { ComboBox } from '@progress/kendo-react-dropdowns';

class AppComponent extends React.Component {
    source = [ "Albania", "Andorra", "Armenia", "Austria", "Azerbaijan" ];
    state = {
        events: []
    };

    onOpen = () => { this.log('open'); }
    onClose = () => { this.log('close'); }
    onFocus = () => { this.log('focus'); }
    onBlur = () => { this.log('blur'); }
    onChange = (event) => { this.log('change', event.target.value); }
    onFilterChange = (event) => { this.log('filterChange', event.filter.value); }

    render() {
        return (
            <div>
                <ComboBox
                    data={this.source}
                    onOpen={this.onOpen}
                    onClose={this.onClose}
                    onFocus={this.onFocus}
                    onBlur={this.onBlur}
                    onChange={this.onChange}
                    onFilterChange={this.onFilterChange}
                    filterable={true}
                />
                <br />
                <br />
                <EventsLogger events={this.state.events} />
            </div>
        );
    }

    log(event, arg) {
        const events = this.state.events;
        events.unshift(`${event} ${arg || ""}`);

        this.setState({
            events: events
        });
    }
}

class EventsLogger extends React.Component {
    render() {
        return (
            <div className="example-config">
                <h5>Event log</h5>
                <ul className="event-log" style={{ textAlign: 'right' }}>
                    {this.props.events.map(function(event, index) {
                        return (<li key={index}>{event}</li>);
                    })}
                </ul>
            </div>
        );
    }
}

ReactDOM.render(
    <AppComponent />,
    document.querySelector('my-app')
);
In this article