Tree — Playground
Switch between display and checkable modes while preserving controlled state.
mode
size
State
<kui-tree ariaLabel="Project files" [data]="nodes" [loadChildren]="loadChildren" [(value)]="selectedId" [(expandedIds)]="expandedIds" />| 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. |
Inputs verified against @kikita-labs/ui v1.6.1 public typings and package docs.