TreeSelect
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.
When to use it
- Department selection
- Nested categories
- Permission scope
- Choose across several hierarchy branches
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
- Submit a different level from the one the user sees
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
Further reading