Tree Component
React Aria Documentation | Source Code
A tree can be built using HTML lists, but is very limited in functionality. The Tree component helps achieve accessible and interactive tree components with rich interactions like focusable elements, keyboard navigation, item selection, and drag and drop.
Item Selection
Single or multiple selection with optional checkboxes, disabled items, and toggle/replace selection behaviors.
Interactive Children
Tree items may include interactive elements such as buttons, menus, etc.
Keyboard Navigation
Arrow keys, page up/down, home/end, typeahead, auto scrolling, and selection modifier keys.
Drag and Drop
Supports drag and drop to reorder, move, insert, or update items via mouse, touch, keyboard, and screen reader.
Touch Friendly
Selection and actions adapt their behavior depending on the device.
Accessible
Follows ARIA treegrid pattern with selection announcements via live region.
Basic Example
Selection Examples
Single Selection
Interactive Features
With Item Actions
With Links
Disabled Items
Asynchronous Loading
Empty State
Drag and Drop
Draggable Tree
Drop Target Tree
Keyboard Navigation
Try these keyboard shortcuts:
- ↑ ↓ - Navigate between items
- ← → - Collapse/expand items
- Space - Toggle selection
- Enter - Activate item action
- Home End - Go to first/last item
- Ctrl + A - Select all (multiple selection)