Tree View
Tree View
A file-explorer-style tree — expandable folders, optional multi-select with checkboxes, keyboard navigation.
import { TreeView, type TreeNode } from "@pompeitech/vesuvius-ui";Default
src
components
button.tsx
input.tsx
index.ts
package.json
README.md
API
TreeView
| Prop | Type | Description |
|---|---|---|
data | TreeNode[] | Required — the tree to render. |
defaultExpanded | string[] | Node ids open on first render. |
multiSelect | boolean | Adds a checkbox per node instead of single-select highlighting. |
onSelect | (ids: string[]) => void | Fires with the current selection — a one-entry array in single-select mode, any number in multiSelect mode. |
Plus every native <div> prop.
TreeNode
| Field | Type | Description |
|---|---|---|
id | string | Required — unique within the tree. |
label | string | Required. |
icon | LucideIcon | Optional leading icon. |
children | TreeNode[] | Nested nodes — presence of this field (even empty) makes the node an expandable folder rather than a leaf file. |
disabled | boolean | Excludes the node from selection and keyboard navigation. |
Accessibility
Implements the ARIA tree/treeitem pattern — arrow keys navigate (↑/↓ between visible nodes, → expands or moves into a folder, ← collapses or moves to the parent), Enter/Space selects, and aria-expanded/aria-selected are kept in sync automatically.