Forms

Tree select

@xui/tree-select

A select whose options form a tree — expand branches and pick nodes. Single mode binds one value; multiple shows removable chips with checkboxes. Fully keyboard-driven from the trigger: Up/Down move, Right/Left (RTL-aware) expand/collapse or step in/out, Home/End jump, Enter selects, Escape closes.

Install

pnpm add @xui/tree-select

Add the barrel to a standalone component's imports:

import { XuiTreeSelectImports } from '@xui/tree-select';

@Component({
  imports: [XuiTreeSelectImports],
  // …
})

Examples

Single

Loading preview…

<xui-tree-select class="w-72" [nodes]="nodes" [(value)]="value" placeholder="Pick a team" />

Multiple

Loading preview…

<xui-tree-select class="w-72" [nodes]="nodes" [(value)]="value" multiple placeholder="Pick teams" />

API

XuiTreeSelect

component

xui-tree-select

A select whose options are a tree. Single-select binds value; with multiple, value is a string array shown as removable chips. Branches expand/collapse; leaf (or any) nodes are selectable.

Inputs

Name

Type

Default

class

ClassValueExtra classes, merged into the component's own rather than replacing them.

''

nodes

XuiTreeSelectNode[]The roots of the selectable tree. Each node carries its own children.

[]

value

two-way

string | string[] | nullThe selected node value, or an array of them when multiple. Two-way bindable with [(value)].

null

multiple

booleanAllow several nodes to be selected, with checkboxes in the panel and tags in the trigger.

false

placeholder

stringTrigger text shown while nothing is selected.

'Select'

disabled

booleanBlock interaction and dim the trigger. The panel cannot be opened.

false

Source

libs/ui/tree-select/xui