TreeSelect

Tree-structure selection supporting parent-child cascaded multiple selection.

Single Select

Single select

Example

Click a node to select it and close the dropdown; children can be expanded/collapsed.

Multiple Select (parent-child linkage)

Multiple

Example

In multiple mode, selecting a parent cascades the selection to all children; clicking again cancels. Parent nodes show an "all / half" selected state.

Preset Value

Preset value

Example

Controlled Expand (expanded)

expanded is a JSON array declaring the set of node values to expand (a controlled channel): externally changing the property immediately reflects in the dropdown tree. Below, "Frontend → Framework" is pre-expanded, and buttons drive it externally:

Controlled expand (expanded)

Expand allCollapse all

Example

Presetting expanded='["fe","framework"]' expands "Frontend" and "Framework" the first time the dropdown opens; clicking "Expand all" externally writes expanded='["fe","framework","be"]', and "Collapse all" writes '[]', re-rendering immediately when the dropdown opens.

Disabled

Disabled

Example

Empty State

No data

Example

Events

Change events

Example

Listen to oas-change; detail.value is a string for single select and an array for multiple:

API

Attributes

Attribute	Description	Type	Default
disabled	Disabled	boolean	—
expanded	Set of expanded node values (JSON array, controlled)	string	[]
multiple	Multiple select + parent-child cascade	boolean	—
options	Tree options, JSON array, supports children / disabled	TreeOption[] | string	[]
placeholder	Placeholder text	—	—
value	Selected value (JSON array in multiple mode)	string	[]

Events

Event	Description
oas-change	Selection change, detail: { value }