...
A tree is a hierarchical List, allowing users to expand and collapse nodes to show or hide nested items.
 |
Types
Image | |
Single selection | |
Multiple selection |  |
Smart Selection |  |
...
In most cases, nodes should be ordered alphabetically, to allow users locating specific items quickly.
Other cases may include logical, chronological or numeric orders.
States
Container Node | Leaf Node | |
|---|---|---|
Regular |  |  |
Hover |  |  |
Active |  |  |
Selected |  |  |
Disabled | NA |  |
Focused |  |  |
Focused, Hover |  |  |
Focused, Active |  |  |
Focused, Disabled | NA |  |
...
Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.
Design
Zeplin link | Screen thumbnail |
|---|---|
Single Select |  |
Multi Select |  |
Smart Select |  |
Tree - Organization |  |
Code
...