background

KendoReact

React MultiSelectTree

  • Enable users to easily choose multiple predefined values from a hierarchical list.
  • Part of the KendoReact library along with 100+ professionally-designed components.
  • Includes support, documentation, demos, virtual classrooms, learning resources and more!
MultiSelectTree Header
  • Easily Select Multiple Items from a Hierarchical List

    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
  • Adaptive Rendering

    The KendoReact MultiSelectTree supports an adaptive mode, enabling a mobile-friendly rendering of the component popup. The component automatically adapts to the current screen size and alters its rendering accordingly. 

    See the React MultiSelectTree Adaptive Rendering demo 

    MultiSelectTree Adaptive 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 Accessibility - KendoReact

All KendoReact Components

Next Steps