Layout & display

TreeView

Nested data as a tree, following the WAI-ARIA tree pattern: one tab stop for the whole widget, arrow keys to move between rows, and typeahead to jump to a label. This is a structure, not a menu. For links use SidebarNav.

Basic

Arrow keys walk the visible rows, right opens a branch and then descends into it, left closes it and then climbs out, Home and End jump to the ends, and typing a few letters jumps to the next matching label.

src
- lib
- app.html
static
package.json edited

Selected: schema

A branch slides open and shut with its chevron, the way a Collapsible does. A shut branch renders nothing under it: one nobody has opened never draws its rows, and one that closes unmounts them once its collapse has played, so a large tree costs no more to draw than its open rows.

Checkable

Only leaf ids are stored. A branch's state is derived from the leaves underneath it every time it renders, so the box a branch shows and the write its click performs come from one list and cannot disagree. A part-checked branch announces as mixed. In a checkable tree Space ticks the row and Enter activates it, because one key doing both leaves the user unable to do either on purpose.

src
- lib
  client.ts
  
  schema.ts
- app.html
static
package.json edited

Checked: ["schema"]

Under a touch screen

Every row is 44px tall, the height a SidebarNav row takes there. In a checkable tree the check box takes a 44px square of its own beside the label, so a tap meant to check a row never opens or selects it instead. The rest of the row still selects it. A mouse keeps the shorter rows.

API

Prop	Type	Default	Description
`nodes` required	`TreeNode<T>[]`	no default	The tree data.
`label` required	`string`	no default	Accessible name of the tree. Required, because an unnamed tree announces as just "tree".
`expanded`	`string[]`	`[]`	Bindable ids of the open branches.
`selected`	`string \| undefined`	no default	Bindable id of the activated row.
`checked`	`string[]`	`[]`	Bindable checked leaf ids. A branch is never stored. Its state is derived.
`checkable`	`boolean`	`false`	Draw a tri-state box on every row.
`class`	`string`	no default	Extra classes on the tree element.
`onactivate`	`(node: TreeNode<T>) => void`	no default	Fires when a row is clicked or Enter is pressed on it.
`oncheck`	`(checked: string[]) => void`	no default	Fires when the checked set changes, with the whole new list.

TreeNode

Prop	Type	Default	Description
`id` required	`string`	no default	Stable across renders.
`label` required	`string`	no default	Row text, and what typeahead matches.
`icon`	`Component`	no default	A lucide component, drawn before the label.
`children`	`TreeNode<T>[]`	no default	Nested rows. An empty array is a leaf, not an empty branch.
`badge`	`string \| number`	no default	A count or a status at the end of the row.
`disabled`	`boolean`	`false`	Neither activated nor checked, and its subtree is skipped by a branch write.
`data`	`T`	no default	Whatever your handler needs when the row is activated.