Tree

Usage

import { TreeSelect, TreeView, type TreeNode } from "@zynactra/ui/tree"

<TreeView aria-label="Org units" nodes={units} selectionMode="multiple" selected={ids} onSelectedChange={setIds} />

A node is { id, label, children?, disabled? }. selectionMode is none (an outline), single or multiple (checkboxes). Expansion is uncontrolled with defaultExpanded, or controlled with expanded and onExpandedChange.

The keyboard follows the WAI-ARIA tree pattern: arrows move, Right opens, Left closes or goes to the parent, Home and End jump, Space and Enter select.

Examples

Tree Select

TreeSelect puts the tree in a Popover behind a field, with a search box. Matches show with their ancestors, already open.

Including descendants

With includeDescendants, choosing a node covers everything below it: descendants show as included and can't be chosen on their own, and choosing a parent drops its descendants from the value. Use it when your data works that way (a grant on an org unit covers its sub-units), so the screen says what the server will do.

Guidelines

• Use a tree only for a real hierarchy. A flat list of categories is a Combobox.
• Keep labels short; the indent already shows the path.
• Give TreeView an aria-label; label TreeSelect with a Field.
• For very large trees, load children on expand and pass them in as they arrive.