HomeGetting StartedColor SystemTypographySpacingIconographyLayoutInstallationUsageAngularBlazorReactSvelteVueThemingTypographyCustomizationCSS-Only ComponentsFormsIconsIllustrationsAccessibilityGlobal ConfigurationTailwind CSSSass LibraryForge MCP ServerDropdown OptionsFocus Indicator ClippingAll componentsButtonButton AreaChipFloating Action ButtonIcon ButtonSplit ButtonAutocompleteButton ToggleCalendarCheckboxChip FieldColor PickerDate PickerDate Range PickerFile PickerLabelRadioSelectSliderSwitchText FieldTime PickerApp BarApp LauncherDrawerMenuPaginatorSkip LinkStepperTabsView SwitcherAccordionApp LayoutCardDividerExpansion PanelScaffoldSplit ViewStackStructured CardToolbarBadgeBannerBusy IndicatorCircular ProgressDialogInline MessageLinear ProgressPage StateSkeletonToastTooltipAvatarIconKeyLabel ValueListMeterSecretTableTimelineTimestampTreeKeyboard ShortcutPopoverIntroductionColorTypographySpacingShapeBorderElevationLayeringAnimationUsageIcon LibraryBlocksRoadmapChangelogBlog

Tree

Beta

Trees are interactive lists that allow users to navigate through hierarchical data.

Experimental

Tree is an experimental component in developer preview — its API and implementation may change in future versions, and there may be unresolved bugs. Use it with that in mind, and be prepared to update your code as it evolves.
ProjectsAlphaBetaArchive2024

Usage

forge-tree nests forge-tree-item children to let a user navigate hierarchical data, through mode (single, multiple, leaf, or off), accordion, indentLines, selectionFollowsFocus, and disabled, while each item carries its own open, selected, lazy, and disabled state. Use it for genuinely hierarchical data — folders, nested categories, an org chart; for a flat set of items, use a plain list instead.

Rules

Do
Use a tree only for data that's genuinely hierarchical, not for a flat list styled to look nested.Set indentLines when the hierarchy is deep enough that indentation alone doesn't make the structure clear.Use lazy loading for a node whose children are expensive to fetch or render, rather than loading the whole tree up front.
Don't
Don't use a tree for a flat set of items with no real parent/child relationship — use a list instead.Don't ship a tree as the only way to reach content that also needs a non-hierarchical path — it's easy to lose track of a deeply nested item.

Basic usage

Nest forge-tree-item elements in each other’s children slot to build the hierarchy; each item’s value identifies it when selected.

A three-level tree of nested items.

Selection

Set mode to single (the default) or multiple to control how many items can be selected at once, or leaf to only allow selecting items with no children. Set mode="off" to disable selection entirely, and selectionFollowsFocus to select an item as soon as it’s focused (single mode only).

Accordion behavior

Set accordion so opening one item automatically closes its siblings, instead of allowing multiple branches open at once.

Lazy loading

Set lazy on a forge-tree-item for a node whose children should be fetched or rendered only when the item is first opened, rather than up front.

Trees are interactive lists that allow users to navigate through hierarchical data.

import "@tylertech/forge/tree";
Properties
PropertyAttributeTypeDefaultDescription
accordionaccordionbooleanfalseWhether opening an item closes all other items.
indentLinesindentLinesbooleanfalseToggles the rendering of indent lines showing hierarchy.
modemodeTreeMode'single'How selecting tree items is handled.
selectionFollowsFocusselectionFollowsFocusbooleanfalseWhether focusing an item also selects it. This takes no effect when in multiple mode.
disableddisabledbooleanfalseWhether selecting items is disabled.
valuevalueunknown[][]The value of all selected items.
Events
NameTypeDescription
forge-tree-select-allCustomEvent<void>Dispatched when the user selects all items.
Slots
NameDescription
(default)The default slot for tree items.
expand-iconA custom expand icon to show when an item is closed.
collapse-iconA custom collapse icon to show when an item is open.
CSS Parts
NameDescription
::part(root)The root tree element.

Keyboard interaction and ARIA

Tree implements the keyboard shortcuts and ARIA roles, states, and properties defined in the WAI-ARIA Tree View pattern — arrow keys move focus between items, and the expanded/selected state of each item is exposed automatically. You don’t need to hand-wire ARIA attributes yourself.

Loading Forge chat…