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.
TreeSelect
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 selectionEngineering ×2☑ Engineering☑ Frontend☐ Backend☐ Design
- Nested categories☑ Apparel☑ Men’s clothing☑ Shirts☐ Electronics☑ HomeThree categories selected across unrelated departments
- Permission scope☑ Engineering→ Automatically includes the whole branchEngineering ×Frontend ×Backend ×
- Choose across several hierarchy branchesFrontendEngineering / FrontendTeamDesign / FrontendExperience
When NOT to use it
- Force flat data into a treeProvince / City / DistrictGuangdong ProvinceShenzhenNanshan District
- Hide the meaning of partial selectionFrontendBackendDesign
- Load a huge tree without search or lazy loading▾Engineering▸FrontendYou only want to view the org chart, but you’re forced to select something
- Submit a different level from the one the user sees▾ BeijingShanghaiGuangzhouCities 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
Recommended tool
Web fine-tuning tool · Selector Pro
Select page elements for precise AI edits
Click a button, text, or card, note the change, then copy its exact location to AI.
Open Selector Pro website↗Further reading
Quick check