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.

Check Strategy (check-strategy)

check-strategy controls which nodes enter value in multiple mode: all (default) keeps both parents and children; parent keeps only parent nodes (a parent represents its fully-checked children); child keeps only leaf nodes. All three strategies share the same cascaded checking logic — only the emitted value differs:

Check strategy (all / parent / child)

all: value = —

parent: value = —

child: value = —

Example

After checking "Frontend", the three strategies emit: all → ["fe","framework","vue","react","css"], parent → ["fe"], child → ["vue","react","css"] (order follows the demo data's declaration order of "Framework" children). Under parent, checking leaves one by one converges the value to the parent once all its children are checked.

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.

Large Data (Virtual Scroll)

Ten-thousand-node virtual scroll

Expand allCollapse all

Example

Setting virtual enables windowed rendering (with height for the viewport and item-height for the row height): the dropdown reuses oas-virtual-list to render only the visible window, so 10,100 nodes (100 departments × 100 members) scroll smoothly; ↑/↓ move the highlight, Enter toggles a check, →/← expand/collapse, and aria-activedescendant stays valid across window re-renders. Data is injected via the options property channel, the expanded set is controlled by the expanded attribute, and "Expand all" writes the full node set externally.

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
check-strategy	Multiple-select check strategy: all (default) keeps both parents and children in the value; parent keeps only parent nodes (a parent represents its fully-checked children); child keeps only leaf nodes	string	all
disabled	Disabled	boolean	—
expanded	Set of expanded node values (JSON array, controlled)	string	[]
height	Virtual-scroll viewport height (px); works with virtual	string	288
item-height	Fixed row height for virtual scroll (px)	string	36
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	[]
virtual	Enable virtual scroll: the dropdown renders only the visible window for large data (reuses oas-virtual-list), keeping keyboard/ARIA intact	boolean	—

Events

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