Tree

Related components

npx garn-ui add tree

Registry

tree

Source

tree.tsx

Deps

@radix-ui/react-slotlucide-react

Registry deps

utilsuse-announceuse-controllable-key-setsortablecheckboxinputspinner

Overview

Guidelines

Best practices

Content guidelines

• Lead the node with its name; keep trailing metadata short (a count / badge) and put actions in Tree.Actions.
• Use open/closed-aware icons (folder vs folder-open) via Tree.Icon's data-expanded for scannability.

Accessibility

Role

tree

Focus

A single roving tabindex on the treeitems (active node = 0, others = -1); Arrow keys move focus and the focus ring is drawn on the row from the focused <li>. The chevron and per-node checkbox are tabindex=-1 (operated by keyboard-at-the-treeitem or pointer) so the tree stays one tab stop; Tree.Actions rove with the active node.

• • The tree is a <ul role=tree> of <li role=treeitem>; a node's children are wrapped in a <ul role=group>. Each treeitem carries aria-level, aria-setsize, and aria-posinset computed from its position; parents carry aria-expanded (leaves do not).
• • Roving tabindex — exactly ONE node is tabbable (tabindex=0) at a time (the last-focused node, else the first enabled visible node); all others are -1. Tab enters/leaves the whole tree as a single stop.
• • Keyboard (APG Tree View): Up/Down move through visible nodes; Right expands a collapsed parent then descends; Left collapses an open parent then ascends to the parent; Home/End jump to the first/last visible node; type-ahead focuses the next node whose label matches; `*` expands every sibling parent at the current level.
• • Selection: `selectionMode="single"` sets aria-selected on one node (optionally following focus); `selectionMode="multiple"` sets aria-multiselectable on the tree and aria-selected per node, with Space/click toggle, Shift+Arrow / Shift+Click range extension, and ⌘/Ctrl+A select-all-visible.
• • `checkable` renders a real Checkbox per node (tabindex=-1, operated by Space or pointer). Under `cascade` (default), checking a parent conducts to all enabled descendants and a parent shows aria-checked=mixed when only some descendants are checked; conduction stops at disabled nodes. `cascade={false}` (checkStrictly) makes checks independent.
• • The chevron toggle is decorative (aria-hidden, tabindex=-1) — expansion is announced via the treeitem's aria-expanded and driven by the keyboard, so the toggle never becomes a second tab stop. `Tree.Actions` keep their own tab stops within the active node.
• • Filter-to-reveal hides non-matching nodes, force-expands the ancestors of matches, and highlights the matched substring; roving/keyboard operate over the filtered-visible set. Inline rename swaps the label for an input whose data-slot keeps the tree keyboard hands-off (Enter/blur commit, Escape cancels). Give the tree an accessible name via `label`, `aria-label`, or `aria-labelledby` (dev-warns if missing).
• • Drag-reparent (`reorderable`) drags via a real <button> `Tree.DragHandle` (accessible name required), so the node keeps its role=treeitem — a role=button on the row would break the tree model. Fully keyboard-operable: Space/Enter on the handle picks the node up; arrows move the drop target through the visible nodes; Right nests it inside the target, Left outdents it; Space/Enter drops and Escape cancels. Each pick-up/move/drop is announced to a polite live region; a node can never be dropped into its own subtree (cycle-safe).