React ComboBox

Overview

The React ComboBox component, part of KendoReact, 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. The component naturally highlights the dropdown that the values appear in a dropdown arrow next to the text input, and the component sports a whole slew of features to make picking the proper value as easy as possible.

See React ComboBox Overview demo

React ComboBox – Overview, KendoReact UI Library

Filtering

The built-in filtering mechanism of the KendoReact ComboBox automatically reduces the number of available choices in the ComboBox dropdown. Filtering can be configured in various ways, including “starts with” or “contains” to ensure the most intuitive filtering behavior for any scenario.

See React ComboBox Filtering demo

React ComboBox – Filtering, KendoReact UI Library

Suggestions

With the suggestion feature enabled, the KendoReact ComboBox will attempt to autofill the input element based on the closest available value. This suggestion will continue to update as the user types.

See React ComboBox Suggestions demo

React ComboBox – Suggestions, KendoReact UI Library

Custom Rendering

By default, the KendoReact ComboBox renders items with plain text. Certain scenarios call for more advanced rendering and this is where the custom rendering feature of the React ComboBox shines! This allows a custom renderer to be injected for any list item, header or footer element, as well as the suggestion lists when no data is available—enabling developers to take full control over the look and feel of the ComboBox component.

See React ComboBox Custom Rendering demo

React ComboBox – Custom Rendering, KendoReact UI Library

Virtualization

Depending on your requirements the React ComboBox may be bound to thousands or hundreds of thousands of data items, which can be quite taxing on any modern browser to render. Thanks to the built-in virtualization feature of the KendoReact ComboBox, scrolling through large amounts of data is done with buttery-smooth performance.

See React ComboBox Virtualization demo

React ComboBox – Virtualization, KendoReact UI Library

Floating Labels

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 KendoReact ComboBox this is as easy as setting the label configuration and the React ComboBox takes care of the rest!

See React ComboBox Floating Labels demo

React ComboBox – Floating Labels, KendoReact UI Library

Forms Support

The KendoReact ComboBox is most often used as a part of a form to help the user select from a longer list of data. In this vein, the React ComboBox supports being added to any plain form element or integrated into an existing React Form library (including the Form component from KendoReact). Thanks to built-in styling and behavior around validation, this UI component can fit with any form.

See React ComboBox Forms Support demo

React ComboBox – Forms Support, KendoReact UI Library

Keyboard Navigation

Keyboard navigation has become a crucial part of website navigation for several reasons ranging from speed of data input to accessibility concerns. Thankfully, this React ComboBox comes with built-in keyboard navigation to help navigate through every part of the component and assist with selecting a value with ease.

See React ComboBox Keyboard Navigation demo

Accessibility

Creating accessible React UI components is a core concept of KendoReact, and the ComboBox is no exception! The KendoReact ComboBox is compliant with Section 508 standards, is AA rated with WCAG 2.0, and follows WAI-ARIA standards.

See React ComboBox Accessibility demo

React ComboBox - Accessibility, KendoReact UI Library

Next Steps

Visit Our Demos

See KendoReact in action and check out how much it can do out-of-the-box.

See Pricing

Buy an individual license for KendoReact, or treat yourself to Kendo UI, our complete JavaScript bundle.

Start Free Trial

Try KendoReact with dedicated technical support.