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