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' | undefined | undefined | Selects navigation-style rows or checkbox rows with cascade. Falls back to defaults.tree.mode, then display. |
| size | 'xs' | 'sm' | 'md' | 'lg' | undefined | undefined | Controls row height and label scale; only sm, md and lg have dedicated styling. Falls back to defaults.tree.size, then the root size, then md. |
| data | readonly KuiTreeNode[] | [] | Root nodes rendered by the tree. |
| ariaLabel | string | undefined | undefined | Accessible name for the role="tree" container. Falls back to the tree.label message (Tree). |
| 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. |
| KuiTreeOptions | interface | - | Shape of defaults.tree: size, mode and disclosureIcon. |
Inputs verified against @kikita-labs/ui v2.0.0 public typings and package docs.