React AutoComplete

Overview

The React AutoComplete component, part of KendoReact, lets your end-users type text into an input element and a list of suggested items will appear in a popup beneath. This is a common scenario that has been popularized by the user experience in Google Search, suggestions in Word processors, or Intellisense in code editors.

React AutoComplete - Overview, KendoReact UI Library

Filtering

The Filtering option of the KendoReact AutoComplete lets the developer define exactly how to filter down the list of suggested items. Some options include filtering down by “starts with” and “contains” just to name a few.

See React AutoComplete Filtering demo

React AutoComplete - Filtering, KendoReact UI Library

Suggestions

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.

See React AutoComplete Suggestions demo

React AutoComplete - Suggestions, KendoReact UI Library

Custom Rendering

Custom renderers are at the heart of React components, and the AutoComplete from KendoReact is no exception. Every aspect of the AutoComplete can be overridden with a custom renderer. Want to insert your own input element in the component? Not a problem. You can also define templates for each individual item to make the list contain more than just text.

See React AutoComplete Custom Rendering demo

React AutoComplete - Custom Rendering, KendoReact UI Library

Floating Labels

Popularized by Material Design, the floating label starts off as a placeholder in an input element only to animate out and float above the input and act as a label. The KendoReact AutoComplete component comes with support for floating labels built-in, no matter what design language you chose to incorporate it with.

See React AutoComplete Floating Labels demo

React AutoComplete - Floating Labels, KendoReact UI Library

Forms Support

If there’s one thing that is certain it is that every web application needs a form of some sort. Our React AutoComplete component contains built-in functionality like validation styles and messages to help the component easily integrate into any form in any application.

See React AutoComplete Forms Support demo

React AutoComplete - Forms Support, KendoReact UI Library

Keyboard Navigation

Whether it stems from users trying to be as productive as possible, or for accessibility reasons, keyboard support in React UI components is important. Of course, the AutoComplete has built-in keyboard support to help navigate every aspect of the application using just a keyboard.

See React AutoComplete Keyboard Navigation demo

Accessibility

One of the core aspects of KendoReact is compliance with various accessibility standards. The KendoReact team understands how important accessibility is for the web and this drives the team to build in accessibility with every component.

The KendoReact AutoComplete is no exception and supports Section 508, Keyboard Navigation, and WCAG 2.0 (with a AAA rating) compliance.

See React AutoComplete Accessibility demo

React AutoComplete - 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.