React Tree Select
@attebyte/react-tree-select is a tree select (also called a checkbox tree) component for React. Give it your hierarchical data and it renders an expandable tree where users can check and uncheck nodes. Parents reflect the state of their children as checked, unchecked or indeterminate.
Root 1
Root 2
Why use it
- Your data, your shape. Pass your own objects and name the properties that hold the ID, label, children and checked state. There is no required node format, and TypeScript checks that the property names exist on your type.
- Tri-state selection. Checking a parent checks its descendants. A parent is checked only when everything under it is checked, and indeterminate (mixed) when some of it is. Disabled nodes are respected throughout.
- Accessible. The tree follows the WAI-ARIA tree view pattern: one tab stop, arrow key navigation, and states announced by screen readers. See Accessibility.
- Customizable. Style any part with class names, or replace the node, label, checkbox or expand icon with your own components. See Customization.
- Controlled or uncontrolled. Let the tree manage selection, or own the data in your state. See Controlled usage.
- Fast. Changes copy only the affected branch, and unchanged nodes skip re-rendering, so large trees stay responsive.
- Small. About 17 KB of JavaScript and 3 KB of CSS, with no global style resets. Supports React 18 and 19 and server-side rendering.