tree

Fragment reference tree

tags

ui

Trees display a hierarchical list of selectable items. Items with children can be expanded and collapsed. The icon shorthand on tree-item prepends a wa-icon before the label text.

Usage

Collapsible tree with nested items

puguitree wa-tree-basic

tree
tree-item(expanded) Documents
tree-item Reports
tree-item Archive
tree-item Downloads

Attributes — tree

Name	Type	Default	Description
selection	single | multiple | leaf	single	Selection behaviour. multiple shows checkboxes. leaf restricts selection to leaf nodes only.

Attributes — tree-item

Name	Type	Default	Description
expanded	boolean	false	Expand state on initial render.
selected	boolean	false	Mark item as selected.
lazy	boolean	false	Marks the item as not yet loaded; emits wa-lazy-load on first expand.

CSS Custom Properties — tree

Name	Default	Description
--indent-guide-width	0	Width of the indent guide line. Set to 1px to show guides.
--indent-guide-color	surface border	Color of the indent guide.
--indent-guide-style	solid	Line style: solid, dashed, dotted.
--indent-size	var(--wa-space-m)	Indentation depth per level.

Text content: tree-item uses inline text, not a label attribute. Write tree-item(expanded) Folder Name — not tree-item(label="Folder Name").