Form

TreeSelect

Pick one node, several nodes or whole branches from a tree, with search.

Features6

API

Theming

Basic

One node. Open with Enter or ArrowDown, then ArrowRight / ArrowLeft open and close branches.

Value: api

Multiple

selectionMode="multiple" toggles nodes; display="chip" shows them as chips.

Value: web-ui,sales

10 lines

<div class="stack">  <tx-tree-select    [options]="teams"    [formControl]="team"    [selectionMode]="'multiple'"    [display]="'chip'"    [placeholder]="'Teams'"  />  <span class="hint">Value: {{ team.value ?? '—' }}</span></div>

Checkbox

selectionMode="checkbox" checks a whole branch; partly checked parents show a dash. The field shows the top checked nodes.

Value: web,web-ui,web-app

10 lines

<div class="stack">  <tx-tree-select    [options]="teams"    [formControl]="team"    [selectionMode]="'checkbox'"    [showClear]="true"    [placeholder]="'Access'"  />  <span class="hint">Value: {{ team.value ?? '—' }}</span></div>

Filter

The search keeps the parents of every match, so you see where it is.

Value: —

9 lines

<div class="stack">  <tx-tree-select    [options]="teams"    [formControl]="team"    [filter]="true"    [placeholder]="'Find a team'"  />  <span class="hint">Value: {{ team.value ?? '—' }}</span></div>

States

Sizes, filled variant, disabled and read-only.

11 lines

<div class="stack">  <tx-tree-select [options]="teams" [size]="'small'" [placeholder]="'Small'" />  <tx-tree-select [options]="teams" [variant]="'filled'" [placeholder]="'Filled'" />  <tx-tree-select [options]="teams" [formControl]="locked" [ariaLabel]="'Disabled'" />  <tx-tree-select    [options]="teams"    [formControl]="shown"    [readonly]="true"    [ariaLabel]="'Read only'"  /></div>

Design tokens

dt changes the select tokens of the field and the panel; the indent of the levels comes from the tree tokens.