Tree View
A hierarchical, expandable list for file trees, org charts, and nested categories — keyboard navigable with the same roving-tabindex pattern as Sidebar and Calendar, single/multiple selection, and unlimited nesting depth.
src
README.md
package.json
API
All inputs and configuration options for zyra-tree-view.
| Prop | Type | Default | Description |
|---|---|---|---|
nodes | TreeNode[] | required | { id, label, icon?, disabled?, children? } — children nest recursively |
selectionMode | 'none' | 'single' | 'multiple' | 'none' | Adds row-click (single) or checkbox (multiple) selection |
selected | (string | number)[] | [] | Two-way bound via [(selected)] — the ids currently selected |
expanded | (string | number)[] | [] | Two-way bound via [(expanded)] — the ids of currently expanded nodes |
size | 'sm' | 'md' | 'lg' | 'md' | Row height and font scale |
disabled | boolean | false | Disables the entire tree |
nodeClick (output) | TreeNode | - | Emits on every row click, regardless of selectionMode |
nodeToggle (output) | { node: TreeNode; expanded: boolean } | - | Emits when a node is expanded or collapsed |
Accessibility
Built to meet WCAG 2.0 AA. These notes cover the key ARIA, keyboard, and interaction behaviours.
- Root has role="tree"; each row has role="treeitem" with aria-level and aria-expanded
- Only the focused row is in the tab order — Arrow Up/Down move focus, Arrow Right/Left expand/collapse or move to parent/child
- Home/End jump to the first/last visible row
- Enter/Space toggles selection (if enabled) or expansion