React MultiSelect Tree

Overview

The React MultiSelect Tree is a form component that lets the user choose multiple predefined values from a hierarchical list. The component marries the real-estate savings of a dropdown with the richness of selecting multiple values from a tree view. The KendoReact MultiSelect Tree supports filtering, custom rendering, keyboard navigation and the ability to expand and collapse the hierarchical data items. This React component can be used in both controlled and uncontrolled mode.

See the React MultiSelectTree demo

React MultiSelect Tree Component

Filtering

If the list of options displayed in your MultiSelect Tree is long, the user will be grateful to have a filtering option— – and you can easily offer that with the KendoReact MultiSelect Tree. Simply enable the filtering feature and the component will render an input field in the dropdown list, filtering its contents with each keystroke of the user. To make filtering more user-friendly, you can also toggle a loading indicator to provide a visual indication of the filtering process.

See the React MultiSelectTree Filtering demo

React MultiSelect Tree Component Filtering

Custom Rendering

It’s easy to make this React MultiSelect Tree your own by using the built-in customization options. You can customize list items by adding custom icons, for example. You can also customize the way selected values are displayed by providing a template for the rendered chips. A key part of creating good UX is planning for an empty state scenario. Additionally, you can also customize what should be displayed when no data has been bound yet.

See React the MultiSelectTree Custom Rendering demo

React MultiSelect Tree Component Custom Rendering

Forms Support

The React MultiSelect Tree supports a native implementation of HTML5 form validation. This type of forms support enables you to validate input values and prevent the submission of invalid data. To integrate into any form element, you can use a few simple properties to set validation requirements, custom validation messages and implement complex validation scenarios.

See the React MultiSelectTree Form Support demo

React MultiSelect Tree Component Forms Support

Keyboard Navigation

The KendoReact MultiSelect Tree features several different ways to interact with the component using just the keyboard. This includes opening and closing the popup, navigating through the TreeView with the help of the arrow keys or traversing through the value tags to select a particular tag.

See the React MultiSelectTree Keyboard Navigation demo

Accessibility

Offering accessible React UI components is a core concept of KendoReact, and the React MultiSelect Tree is no exception. Out of the box, this component is compliant with Section 508 and WAI-ARIA standards and is AAA rated with WCAG 2.0.

See the React MultiSelectTree Accessibility demo

React MultiSelect Tree Accessibility

All KendoReact Components

Animation
Conversational UI
Data Grid
Data Query
Data Tools
Date Math
Editor
Excel Export
File Saver
Gantt Chart
ListBox
ListView
Notification
PDF Processing
PivotGrid
Popup
Ripple
Scheduler
Sortable
TreeList
TreeView

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.