Tree
stable 4.1 kB<hk-tree>A tree whose checkbox cascade reports partial state honestly: a parent is checked, unchecked, or indeterminate based on its children, not on its own stale flag.
#hierarchy
Live demo
Running in this page — interact with it.
Inputs
| Name | Type | Default | Description |
|---|---|---|---|
| nodes | HkTreeNode[] | [] | Tree data. Children nest to any depth. |
| checked | string[] | [] | Checked node ids. Two-way bindable. |
| expanded | string[] | [] | Expanded node ids. Two-way bindable. |
| cascade | boolean | true | Checking a parent checks its whole subtree. |
| loadChildren | (node) => Promise<HkTreeNode[]> | null | Lazy loader, called the first time a node expands. |
Outputs
checkedChangeEventEmitter<string[]>Emits on any check change.
Keyboard
- ↑ / ↓ Moves through visible nodes
- → Expands, or moves to the first child
- ← Collapses, or moves to the parent
- Space Toggles the checkbox
Theming
Component tokens, each falling back to a global one:
| Property | Default | Controls |
|---|---|---|
| --hk-tree-indent | 1.25rem | Indent per level. |
| --hk-tree-guide | #e2e8f0 | Vertical guide line. |
Accessibility
- Roles are tree, treeitem and group, with aria-expanded and aria-level on every node.
- A parent reports aria-checked="mixed" when its children disagree, rather than guessing checked or unchecked.
- One tab stop for the whole tree; arrows move within it.