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.

  • Name
  • Item icons (optional)
  • Additional action button for the item (optional)
  • Expand and Collapse buttons
  • Checkbox (optional)
  • Search through items (optional)
tree-select

If a search query is entered, only the following items are shown in the tree:

  • items that match the search query;
  • items that are parents of items found by the search query.

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)
Docs Feedback
If you have any questions or would like to contribute to writing the documentation, please create an issue in our GitHub repository.