COMPONENTS

Tree

A tree presents items in a hierarchical list which can be either selectable or read-only.

tree-intro.png
tree-anatomy.png
  1. Section heading
  2. Tree item with sub-levels
  3. Expansion chevron
  4. Tree item text
  5. Tree item without sub-levels

Tree has three variations — basic, with checkboxes, and with icons.

tree-variations.png

As the Tree hierarchy increases depth levels, the left margin is increased as well. Tree items with sub-levels use a chevron to indicate the ability to expand.

tree-expansion.png

Tree has five states for each variation – enabled, hover, focus, active and disabled. Additionally, tree items with checkboxes can be shown as unselected, selected or indeterminate.

tree-states.png

Tree items can expand or collapse by selecting either the chevron or the text. However, when the items are selectable, selecting the text changes the active selection state and toggles the expansion state, while selecting the chevron only toggles the expansion state.

tree-interaction-2.gif

A Tree can be directly filtered, which is particularly helpful for long lists. The filter should be directly above the Tree and the placeholder label indicate a relationship to the content below.

tree-filtering.png

Tree is available in medium size.

tree-sizes.png