A hierarchical list (tree) is a tree-structured catalog for working with large amounts of data.
When you need to provide the user with convenient access to a large amount of data (hundreds of items). Either the user can organize this data into a tree-structured catalog, or the data already arrives in this form from the system. If these conditions are not met, it is better to use a regular list.
If a search query is entered, only the following items are shown in the tree:
Text matching the search query in the item name is highlighted in bold.
Either single or multiple selection is possible (limited at the tree level).
An item can be selected by clicking on it (in any area except the Expand/Collapse icon and the additional action button). To select multiple items with the mouse, use the Ctrl or Shift keys; to select multiple items with the keyboard, use the Space key.
Non-leaf items can be expanded and collapsed by clicking the arrow icon.
If checkboxes are enabled in the tree list, selecting multiple items is possible by clicking the checkbox.
Sometimes an additional action button may be present for an item.
There are several variants for multiple item selection. See in examples.
Key |
Action |
|---|---|
| Tab | If focus is on the component preceding the tree in tab order → Move to the first tree row or the selected row If focus is on any tree item and it has no additional actions → Move to the next component in tab order after the tree If focus is on any tree item and it has additional actions → Move to the first additional action If focus is on an item's additional action → Move to the next additional action (if one exists), otherwise move to the next component in tab order after the tree |
| Shift + Tab | If focus is on any tree item → Move to the previous component in tab order before the tree If focus is on the component following the tree in tab order → Move to the first tree row or the selected row |
| → | If focus is on a non-leaf item → Expand the nested items of that item If focus is on a leaf item → Nothing happens |
| ← | If focus is on a non-leaf item → Collapse the nested items of that item If focus is on a leaf item → Nothing happens |
| ↵ | If focus is on a tree item → Trigger the primary action of that item If focus is on a tree item with a checkbox → Nothing happens If focus is on an additional action → Apply that additional action |
| Space | If focus is on a tree item with a checkbox → Select that tree item (and all nested items, if any) If focus is on a tree item → Nothing happens If focus is on an additional action → Apply that additional action |
| ↑ ↓ | If focus is on a tree item → Move to the next (if it is the last item — nothing happens) / previous tree item (if it is the first item — nothing happens) |
| PgUp | Move focus to the lowest visible item If the current item is the lowest visible → Scroll the tree down If the current item is the last in the tree → Nothing happens |
| PgDn | Move focus to the topmost visible item If the current item is the topmost visible → Scroll the tree up If the current item is the topmost in the tree → Nothing happens |
| Home | Move focus to the first tree item |
| End | Move focus to the last loaded tree item |
| Ctrl + click | Clicking tree items — multiple row selection Clicking a selected item — the item is deselected |
| Shift + ↓ Shift + ↑ |
If focus is on a tree item → Multiple selection of the next / previous tree items (if the row is the first or last — nothing happens) |
| Ctrl + C | If focus is on tree items → Copy the content of the items By default, item names are copied. The separator between items is a line break |
| Ctrl + A | If focus is on any tree item → Select all tree items (including unloaded ones) |