OrganizationChart

OrganizationChart visualizes hierarchical organization data.

OrganizationChart requires a collection of TreeNode instances as a value.

Founder
- Product Lead
  - UX/UI Designer
  - Product Manager
- Engineering Lead
  - Frontend Developer
  - Backend Developer

Usage #

Examples #

Basic #

OrganizationChart requires a collection of TreeNode instances as a value.

Founder
- Product Lead
  - UX/UI Designer
  - Product Manager
- Engineering Lead
  - Frontend Developer
  - Backend Developer

Collapsible #

Nodes can be expanded and collapsed when collapsible is enabled.

Founder
- Product Lead
  - UX/UI Designer
  - Product Manager
- Engineering Lead
  - Frontend Developer
  - Backend Developer

Selectable #

Nodes can be selected by defining selectionMode along with a value binding with selection properties. By default only one node can be selected, set selectionMode as multiple to select more than one.

Founder
- Product Lead
  - UX/UI Designer
  - Product Manager
- Engineering Lead
  - Frontend Developer
  - Backend Developer

Partial Collapsible & Selectable #

Collapsible and selectable behaviors can be controlled at the node level using the collapsible and selectable properties of a TreeNode.

Founder
- Product Lead
  - UX/UI Designer
  - Product Manager
- Engineering Lead
  - Frontend Developer
  - Backend Developer

Default Collapsed & Selected #

Nodes can define collapsedByDefault and selectedByDefault properties to configure the initial state.

Founder
- Product Lead
- Engineering Lead
  - Frontend Developer
  - Backend Developer

Colored #

Styling a specific node is configured with styleClass option of a TreeNode and custom templates.

Amy ElsnerCEO
- Anna FaliCMO
  - Sales
  - Marketing
- Stephen ShawCTO
  - Development
  - UI/UX Design

Template #

Custom content instead of a node label is defined using the #node template reference.

USD
United States Dollar
- CAD
  Canadian Dollar
  - AUD
    Australian Dollar
  - NZD
    New Zealand Dollar
- MXN
  Mexican Peso
  - COP
    Argentine Peso
  - BRL
    Brazilian Real

Accessibility #

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

Key	Function
tab	Moves focus through the focusable nodes within the chart.
enter	Toggles the selection state of a node.
space	Toggles the selection state of a node.

Collapse Button

Key	Function
tab	Moves focus through the focusable elements within the chart.
enter	Toggles the expanded state of a node.
space	Toggles the expanded state of a node.

ON THIS PAGE

Figma UI Kit

The official Figma UI Kit for Prime UI libraries, the essential resource for designing with PrimeOne components.

Learn More