Displays a hierarchy from the value collection.

Use the collapsible prop to make nodes collapsible.

Control the collapsed state with v-model:collapsedKeys. A key present with true is collapsed; absent keys stay expanded.

The #default slot customizes the node content. OrganizationChart still renders its own structure around it — the content is placed inside .p-organizationchart-node-content, and the built-in collapse button is preserved. The slot scope exposes node, icon, selected, partialSelected, collapsed, toggleSelection and labelClass.

The collapse indicator is customized with the #toggleicon slot, which receives the current collapsed state — shown here with the Plus and Minus icons.

Set selectionMode to single to keep one node selected. Bind the selection with v-model:selectionKeys.

With multiple, each node toggles independently.

Checkbox selection cascades to descendants and reflects partial selection on ancestors.

Screen Reader

Component uses ARIA roles and attributes for screen reader accessibility. The root element has role="tree" with aria-multiselectable for multiple selection support. Each tree item uses role="treeitem" with aria-level for hierarchy, aria-expanded for collapse state, and aria-selected for selection state. Child nodes are grouped with role="group".

Keyboard Support

Node

Collapse Button