Tree Select

You might say

The options are nested, so people need to expand a level before choosing from it.

Choose one or more items from a hierarchyA tree selector fits departments, categories, and permission scopes with parent-child relationships. Explain whether selecting a parent includes its children, what a partial selection means, and which level is actually submitted.

Know first

Tree Checkbox

TreeSelect

R&D DepartmentFront-end group

▾R&D Department

Front-end group

Backend Group

Server

▸Design Department

Quick checkChoose the best answer

An access scope must select several groups across departments and show partially selected parents. Which control fits?

Use a multi-select tree, define parent-child selection rules, and keep labels, partial states, and submitted nodes consistentUse a cascader that keeps only one path from the company to a single groupPut every group in one flat dropdown and let the backend infer parent scopes

You can say this to an AI Agent

Change “Visible data scope” to a multi-select tree selector. Selecting a department should select all of its child groups, while selecting only some children should show the parent as partially selected. After the panel closes, show selected scopes as labels and submit the real node IDs. Add search when the tree is large. Test expand and collapse, parent selection, clearing one child, cross-branch selection, search, and submission, and confirm the partial state, labels, and submitted values stay consistent.

When to use it

Department selection
Engineering ×2
☑ Engineering☑ Frontend☐ Backend☐ Design
Nested categories
☑ Apparel☑ Men’s clothing☑ Shirts☐ Electronics☑ Home
Three categories selected across unrelated departments
Permission scope
☑ Engineering→ Automatically includes the whole branch
Engineering ×Frontend ×Backend ×
Choose across several hierarchy branches
FrontendEngineering / FrontendTeamDesign / FrontendExperience

When NOT to use it

Force flat data into a tree
Province / City / DistrictGuangdong ProvinceShenzhenNanshan District
Hide the meaning of partial selection
FrontendBackendDesign
Load a huge tree without search or lazy loading
▾Engineering
▸Frontend
You only want to view the org chart, but you’re forced to select something
Submit a different level from the one the user sees
▾ BeijingShanghaiGuangzhou
Cities have no parent-child relationship; this hierarchy is artificial

Anatomy

R&D▾R&D DepartmentFront-end group

Shows selected nodes as labels

Overlay showing full tree options

Can expand and collapse. Selecting a parent usually affects its children.

Marks selected items; “partially selected” means only some child items are selected

Indent one level to reflect affiliation

Variants

Single

▾R&D Department

Front-end group

Back-end group

Used when selecting only one node in hierarchical data

Multiple

R&D department

Front-end group

Backend Group

When users need to select several nodes across branches.

Cascade Check

▾R&D Department

Front-end group

Backend Group

When selecting a parent should select its entire branch.

Searchable

R&D Department / Front-End Group

Design Department / Front-End Experience Group

When the tree is large, let users search for the target node first.

Typical use cases

Team directory

Role: Operations Specialist

Viewable data range

R&D Department ×Front-End Group ×

▾R&D Department

Front-end group

Backend Group

▸Design Department

Category assignment

Share "Q3 Planning Document"

Who can see

R&D Department ×Marketing Department ×

Access control

Content dataApparel ×Home ×

▾Apparel

Men's clothing

Women's clothing

▸Home

Folder picker

Add reviewer

Alex ChenSelected

AjiSelected

▾R&D Department

Alex Chen

Aji

Wang Dali

Want GPT or Codex?VibeHubGPT support

GPT-6 Astra

Build in 3D. Put your computer to work.