Give each option a materialized dot-path ("1", "1.1", "1.1.1", …) and point path-member at it. Tree mode auto-enables as soon as a path source is present — the component derives parent and depth from the path and renders the options depth-first, indented by level.

There is no chevron or collapse: every node is always expanded. Typing does an ancestor-preserving search — the tree narrows to the matching nodes plus their ancestors, so the indentation of the results still reads as a hierarchy.

TR01 Interactive tree

Flip cascade behaviour, value policy and breadcrumb badges on a live tree.

Controls
Only used in cascade mode.
Quick usage 
 
 
  • checkbox-mode="cascade" makes checking a node select its whole subtree (a partial branch shows a tristate dash).
    •  
  • cascade-select-policy controls which values are emitted — rolled-up collapses a full subtree to its root, leaves emits only leaf nodes, all emits every checked node.
    •  
  • full-title-member gives each badge a breadcrumb (Fruit / Pome / Apple) when show-badge-full-title is on — disambiguating leaves that share a name.
 
  
 
TR03 Selectable leaves only
 
Mark branches as pure structure — only leaves are real choices.
 
  
Branch nodes render normally (not greyed out) but have no checkbox and are skipped by keyboard navigation — only the leaves can be picked.
 
 
Quick usage 
 
 
 
  • getIsSelectableCallback receives the built node, so it can read the derived node.hasChildren to keep every branch non-selectable.
    •  
  • Non-selectable nodes drop their checkbox and are skipped by Select All and by keyboard arrows, but stay visually normal.