KendoReact
React MultiSelectTree
- Save space in your React app with this powerful combination of a hierarchical dropdown list and a multiselect input component.
- Part of the KendoReact library along with 100+ professional UI components built with React for React, from the ground up.
- Get started quickly with our award-winning support, detailed documentation, interactive demos and instructor-led training.
-
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.
-
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.
-
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.
-
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.
-
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.
-
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.
Next Steps
See KendoReact in action and check out how much it can do out-of-the-box.
Buy an individual license for KendoReact, or treat yourself to Kendo UI, our complete JavaScript bundle.
Try KendoReact with dedicated technical support.