Tree

A list of nodes that open to show their children, for files, categories or any nested data. Pass the nodes in data. Clicking a node selects it, and a node with children also opens or closes.

General

Each node has a unique value and a label, and children for the nodes inside it. Name the tree with aria-label.

Controlled

Use value and onChange for the selected node, and expanded and onExpandedChange for the open ones.

Icons and disabled nodes

icon shows any element before the label. A node with disabled is skipped by the keyboard and cannot be selected.

APIs

Tree.Props

Attribute	Description	Type	Accepted values	Default
data	the nodes of the first level	`TreeNodeData[]`	-	-
value	selected node, to control it	`string` / `null`	-	-
initialValue	node selected on the first render	`string` / `null`	-	`null`
onChange	called with the `value` and the node that was selected	`(value: string, node: TreeNodeData) => void`	-	-
expanded	`value` of the open nodes, to control them	`string[]`	-	-
initialExpanded	`value` of the nodes open on the first render	`string[]`	-	`[]`
onExpandedChange	called with the `value` of every open node	`(expanded: string[]) => void`	-	-
...	native props, passed to the `ul`	`HTMLAttributes`	`'aria-label', 'id', ...`	-

TreeNodeData

Attribute	Description	Type	Accepted values	Default
value	identifies the node, unique in the whole tree	`string`	-	-
label	content of the node	`ReactNode`	-	-
icon	shown before the label	`ReactNode`	-	-
disabled	the node cannot be selected and is skipped by the keys	`boolean`	-	`false`
children	the nodes inside this one	`TreeNodeData[]`	-	-

Keyboard

• Up and Down move the focus to the previous and the next node in view.
• Right opens a closed node, and on an open one goes to its first child.
• Left closes an open node, and on a closed one goes to its parent.
• Home and End go to the first and the last node in view.
• Enter and Space select the node, and a node with children also opens or closes.

Ref

The ref points at the ul of the tree.

The tree follows the ARIA tree pattern: tree, treeitem and group, with aria-expanded on the nodes that have children, aria-selected, aria-level and aria-disabled. Each node is named by its own label, not by the text of its children. Only one node is in the tab order, the selected one or the first, and the arrow keys move the focus between the others. Name the tree with aria-label.

Edit this page on GitHub