React AutoComplete

  • Improve UX by adding word suggestions based on the user input.
  • Part of the KendoReact library along with 100+ professionally-designed components.
  • Includes support, documentation, demos, virtual classrooms, learning resources and more!
AutoComplete Header
  • Enable Users to Filter and Select Items From a List of Available Options

    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.

    See the React AutoComplete Overview demo

    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 the 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 the 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 the React AutoComplete Custom Rendering demo

    React AutoComplete - Custom Rendering, KendoReact UI Library
  • Disabled Items

    You have the flexibility to disable certain items within the React AutoComplete. Once an item is disabled, it cannot be selected as a value for the component, but it might still remain focusable or non-focusable when navigating through the items using the keyboard.

    See the React AutoComplete Disabled Items demo

  • 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 the React AutoComplete Floating Labels demo

    AutoComplete Floating Labels
  • 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 the React AutoComplete Forms Support demo

    React AutoComplete - Forms Support, KendoReact UI Library
  • Grouping

    The React AutoComplete component allows you to group similar data items in logical categories to help users quickly and easily navigate through the drop-down list. Specify the field responsible for each category when you bind your dataset to the KendoReact AutoComplete component. 

    See the React AutoComplete Grouping demo 

    AutoComplete Grouping
  • Prefix and Suffix Adornments

    Elevate user interactivity leveraging the option for adding prefix and suffix adornments. These are custom items, usually an icon or button, inside the field before or after the input area. Typical prefix adornments are currency symbols or unit indicators, while suffix adornments are often used for password visibility toggles, formatting or clearing the input. 

    See the React AutoComplete Adornments demo

  • 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 the 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 the React AutoComplete Accessibility demo

    React Accessibility - KendoReact

All KendoReact Components

Next Steps