Tree
Hierarchical navigation and checkable node lists with keyboard navigation.
Tree is a standalone component driven by typed node data.
import { KuiTreeComponent, type KuiTreeNode } from '@kikita-labs/ui';Provide stable node ids and bind selected or checked state from signals.
src
main.ts
styles
docs
<div class="basic-tree-example">
<kui-tree
ariaLabel="Project files"
[data]="nodes"
[(value)]="selectedId"
[(expandedIds)]="expandedIds"
/>
</div>Use display mode for navigation and checkable mode for multi-select hierarchies.
- Checkable mode cascades checked state to non-disabled descendants.
- Partially checked parents expose mixed state when descendants differ.
- Lazy nodes call loadChildren once on first expansion and cache the result.
- Built-in icons are limited to folder and file; very large trees are not virtualized.
Inputs verified against @kikita-labs/ui v1.6.1 public typings and package docs.
| Name | Type | Default | Description |
|---|---|---|---|
| mode | 'display' | 'checkable' | 'display' | Selects navigation-style rows or checkbox rows with cascade. |
| size | 'sm' | 'md' | 'lg' | 'md' | Controls row height and label scale. |
| data | readonly KuiTreeNode[] | [] | Root nodes rendered by the tree. |
| ariaLabel | string | 'Tree' | Accessible name for the role="tree" container. |
| mobile | boolean | false | Increases toggle hit targets to support touch layouts. |
| [(value)] | string | null | null | Controlled selected node id in display mode. |
| [(selected)] | string | null | null | Deprecated alias for value, kept in sync with it. Use value instead; planned for removal in the next major version. |
| [(checkedIds)] | string[] | [] | Controlled checked node ids in checkable mode. |
| [(expandedIds)] | string[] | [] | Controlled expanded node ids. |
| loadChildren | (node: KuiTreeNode) => Promise<readonly KuiTreeNode[]> | - | Lazy child loader called once for nodes marked lazy. |
| KuiTreeNode.icon | 'folder' | 'file' | - | Optional built-in glyph. Custom icon templates are not implemented. |
Tree uses ARIA tree semantics with roving tabindex keyboard navigation.
- Set ariaLabel when nearby text does not already name the tree.
- Arrow keys, Home, End, Enter, Space, and type-ahead move through visible nodes.
- Disabled nodes stay reachable by navigation but cannot be selected or checked.
- Use mobile mode where touch targets need the larger 44px toggle affordance.