React MultiSelect

Overview

The KendoReact MultiSelect is a form component that displays a list of options in a popup and allows for multiple items to be selected from this list. Each selected item is rendered as a tag in the input element. The React MultiSelect component contains header and footer elements within the data list, supports virtualization and has the ability to work with custom renderers to customize the look and feel of the component.

See React MultiSelect Overview demo

React MultiSelect - Overview, KendoReact UI Library

Data Binding

The KendoReact MultiSelect can be bound to various forms of data, including datasets of objects, an array of primitive values or binding directly to a single value property. Additionally, the React MultiSelect can bind separate fields to the displayed text and the underlying value.

See React MultiSelect Data Binding demo

Filtering

The built-in filtering mechanism of the KendoReact MultiSelect automatically reduces the number of available choices in the MultiSelect 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 MultiSelect Filtering demo

React MultiSelect - Filtering, KendoReact UI Library

Custom Tags

Every selected value in the KendoReact MultiSelect is rendered as a tag. With the custom tags feature, the MultiSelect can customize what to display when an item is selected, including having a single tag representing all selected items.

See React MultiSelect Custom Tags demo

React MultiSelect - Custom Tags, KendoReact UI Library

Custom Rendering

The KendoReact MultiSelect component provides options for customizing the way the component renders its elements. This includes allowing for custom renderers for each item in the option list, the tags displayed in the input, the header and footer elements, as well as the message when no data is bound to the component.

See React MultiSelect Custom Rendering demo

React MultiSelect - Custom Rendering, KendoReact UI Library

Virtualization

With Virtualization enabled, the KendoReact MultiSelect component can scroll through thousands or hundreds of thousands of data items while keeping scrolling buttery smooth.

See React MultiSelect Virtualization demo

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

See React MultiSelect Floating Labels demo

React MultiSelect - Floating Labels, KendoReact UI Library

Forms Support

The KendoReact MultiSelect component can be added to any HTML form, be a part of a KendoReact Form or integrated with any other third-party React form library. The MultiSelect features styling and settings for displaying an invalid state and can work with custom validation messages.

See React MultiSelect Forms Support demo

React MultiSelect - Forms Support, KendoReact UI Library

Globalization

By simply setting the users locale, the KendoReact MultiSelect component can be rendered in a right-to-left fashion and can change any built-in messages to adhere to a new language.

See React MultiSelect Globalization demo

React MultiSelect - Globalization, KendoReact UI Library

Keyboard Navigation

The KendoReact MultiSelect component has keyboard navigation built-in, allowing users to easily traverse and select items within the React MultiSelect using only the keyboard.

See React MultiSelect Keyboard Navigation demo

Accessibility

Accessibility is a core pillar of the KendoReact library, and the KendoReact MultiSelect is no exception. This means the MultiSelect is AAA rated with WCAG 2.0, and supports WAI-ARIA and Section 508 standards.

See React MultiSelect Accessibility demo

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