TreeView

Navigates recursive account, bill-of-material, and organization hierarchies with the ARIA tree keyboard pattern.

Default

Arrow keys move through visible nodes. Inline-end expands and inline-start collapses or returns to the parent.

Assets
- Current assets
  - Cash and cash equivalents
  - Accounts receivable
- Property, plant and equipment
Liabilities
Archived accounts

tsx

<TreeView nodes={nodes} defaultExpanded={["assets", "current"]} aria-label="Chart of accounts" />

tsx

import { TreeView } from "madagent";

Expansion and selection can be owned independently by the application.

Selected: none

tsx

<TreeView expanded={expanded} onExpandedChange={setExpanded} selected={selected} onSelect={setSelected} nodes={nodes} />

Use selectionMode none when the tree only reveals hierarchy.

tsx

<TreeView nodes={nodes} selectionMode="none" />

tsx

<TreeView nodes={nodes} renderNode={(node) => <strong>{node.label}</strong>} />

Prop	Type	Default	Description
`nodes`	`TreeNode[]`	-	Recursive tree data with ids, labels, icons, children, and disabled state
`expanded`	`string[]`	-	Controlled expanded node ids
`defaultExpanded`	`string[]`	`[]`	Initial expanded ids
`onExpandedChange`	`(ids: string[]) => void`	-	Called when branches expand or collapse
`selected`	`stringnull`	-	Controlled selected node
`onSelect`	`(id: string \| null) => void`	-	Called when selection changes
`selectionMode`	`"single""none"`	`"single"`	Enables selection or navigation-only behavior
`renderNode`	`(node: TreeNode) => ReactNode`	-	Custom label renderer

Components automatically adapt to right-to-left languages using CSS logical properties.

tsx

<TreeView nodes={arabicNodes} defaultExpanded={["assets-ar"]} aria-label="دليل الحسابات" />

API Reference

Prop	Type	Default	Description
`nodes`	`TreeNode[]`	-	Recursive tree data with ids, labels, icons, children, and disabled state
`expanded`	`string[]`	-	Controlled expanded node ids
`defaultExpanded`	`string[]`	`[]`	Initial expanded ids
`onExpandedChange`	`(ids: string[]) => void`	-	Called when branches expand or collapse
`selected`	`stringnull`	-	Controlled selected node
`onSelect`	`(id: string \| null) => void`	-	Called when selection changes
`selectionMode`	`"single""none"`	`"single"`	Enables selection or navigation-only behavior
`renderNode`	`(node: TreeNode) => ReactNode`	-	Custom label renderer