React Dropdown Tree | Syncfusion

Overview

The React Dropdown Tree component is a textbox component that allows the user to select single or multiple values from hierarchical data in a tree-like structure. It has several out-of-the-box features, such as data binding, check boxes, templates, UI customization, accessibility, and preselected values.

React Dropdown Tree with data binding.

Data binding

You can bind data to the Dropdown Tree component from a variety of data sources. The data can be local or in any remote service and fetched using different kinds of adapters like OData, OData V4, URL, JSON, and Web API.

Render modes

The Dropdown Tree component has different render modes to visualize selected items.

Box mode

The selected items are displayed as a chip (box) in the Dropdown Tree input box.

React Dropdown Tree with chip mode

Delimiter mode

The selected items are displayed with the delimiter character in the Dropdown Tree input box.

React Dropdown Tree with delimiter mode

Default mode

The default mode is a combination of both the box and delimiter modes. When the component is in focus, the selected items will be displayed as chips similar to the box mode. Otherwise, the selected items will be displayed with a delimiter character as in the delimiter mode.

React Dropdown Tree with default rendering mode.

Template mode

The selected items are displayed with the given custom template value instead of the selected item text in the Dropdown Tree input box.

React Dropdown Tree with custom rendering mode.

React Dropdown Tree with checkboxes.

Check box support

The React Dropdown Tree component provides built-in support for check boxes, allowing users to select more than one item. Enabling the check boxes and auto-check functionality makes the parent and child items dependent on each other. This component also provides a Select All option of all items in the pop-up.

Multiple selection

The Dropdown Tree component allows users to select more than one item in the pop-up through the multi-selection functionality.

React Dropdown Tree with multiple selection.

UI customization with templates

Use templates to change the appearance of the selection pop-up for tree items, plus the header and footer of the pop-up tree.

Header template

Design your own header for the pop-up tree using the header template.

React Dropdown Tree with header template

Item template

Define the custom appearance of each tree item using the item template.

React Dropdown Tree with item template

Design your own custom footer for the pop-up tree using the footer template.

React Dropdown Tree with footer template

Built-in themes

Five built-in SASS-based themes are available, such as Material, Bootstrap, Fabric (Office 365), Tailwind CSS, and High Contrast.

Theme illustration for React Dropdown tree

Web accessibility

Fully supports WAI-ARIA accessibility to make the Dropdown Tree accessible to screen readers and assistive devices.
Follows WAI-ARIA best practices for implementing keyboard interaction.
Uses WCAG 2.0-based design for UI element visuals such as foreground color, background color, line spacing, text, and images.
Supports right-to-left (RTL) direction for users working in RTL languages like Hebrew and Arabic.

Developer-friendly APIs

Developers can customize all UI elements and control their behaviors according to the end user’s requirements through the component’s rich set of client-side APIs.

Other supported frameworks

The Dropdown Tree component is also available in Vue, Angular, and JavaScript frameworks. Check out the different Dropdown Tree platforms from the links below,

Rated by users across the globe

Aweseome, enough said. really

Easy usability, solving real life problems. easy to implement. most of the cases has the operators and settings possibilities you right away need. never fails to impress