Inputs & Textarea
Pull to Refresh
React Grid Layout
A tree presents items in a hierarchical list which can be either selectable or read-only.
Tree has three variations — basic, with checkboxes, and with icons.
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 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 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.
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 is available in medium size.