Tree View

<afp-tree-view>

experimental

This component uses the light DOM, so its markup and styles are part of the regular document flow.

A tree view component for displaying hierarchical data with expandable/collapsible nodes.

<afp-tree-view id="tree"></afp-tree-view>

<script>
  const tree = document.getElementById('tree');
  tree.data = [
    {
      id: '1',
      label: 'Documents',
      icon: 'folder',
      children: [
        { id: '1-1', label: 'Work', icon: 'folder' },
        { id: '1-2', label: 'Personal', icon: 'folder' }
      ]
    },
    {
      id: '2',
      label: 'Images',
      icon: 'folder',
      children: [
        { id: '2-1', label: 'photo1.jpg', icon: 'image' },
        { id: '2-2', label: 'photo2.png', icon: 'image' }
      ]
    }
  ];
</script>

<afp-tree-view [id]="'tree'"></afp-tree-view>

<script>
  const tree = document.getElementById('tree');
  tree.data = [
    {
      id: '1',
      label: 'Documents',
      icon: 'folder',
      children: [
        { id: '1-1', label: 'Work', icon: 'folder' },
        { id: '1-2', label: 'Personal', icon: 'folder' }
      ]
    },
    {
      id: '2',
      label: 'Images',
      icon: 'folder',
      children: [
        { id: '2-1', label: 'photo1.jpg', icon: 'image' },
        { id: '2-2', label: 'photo2.png', icon: 'image' }
      ]
    }
  ];
</script>

<AfpTreeView id="tree"></AfpTreeView>

<script>
  const tree = document.getElementById('tree');
  tree.data = [
    {
      id: '1',
      label: 'Documents',
      icon: 'folder',
      children: [
        { id: '1-1', label: 'Work', icon: 'folder' },
        { id: '1-2', label: 'Personal', icon: 'folder' }
      ]
    },
    {
      id: '2',
      label: 'Images',
      icon: 'folder',
      children: [
        { id: '2-1', label: 'photo1.jpg', icon: 'image' },
        { id: '2-2', label: 'photo2.png', icon: 'image' }
      ]
    }
  ];
</script>

<AfpTreeView :id="'tree'"></AfpTreeView>

<script>
  const tree = document.getElementById('tree');
  tree.data = [
    {
      id: '1',
      label: 'Documents',
      icon: 'folder',
      children: [
        { id: '1-1', label: 'Work', icon: 'folder' },
        { id: '1-2', label: 'Personal', icon: 'folder' }
      ]
    },
    {
      id: '2',
      label: 'Images',
      icon: 'folder',
      children: [
        { id: '2-1', label: 'photo1.jpg', icon: 'image' },
        { id: '2-2', label: 'photo2.png', icon: 'image' }
      ]
    }
  ];
</script>

Examples #

Basic Tree View #

Use the data property to provide the tree structure. Each node must have an id and label.

<afp-tree-view data='[
  {
    "id": "1",
    "label": "Root Item 1",
    "children": [
      { "id": "1-1", "label": "Child 1-1" },
      { "id": "1-2", "label": "Child 1-2" }
    ]
  },
  {
    "id": "2",
    "label": "Root Item 2",
    "children": [
      { "id": "2-1", "label": "Child 2-1" }
    ]
  }
]'></afp-tree-view>

<afp-tree-view data='[
  {
    "id": "1",
    "label": "Root Item 1",
    "children": [
      { "id": "1-1", "label": "Child 1-1" },
      { "id": "1-2", "label": "Child 1-2" }
    ]
  },
  {
    "id": "2",
    "label": "Root Item 2",
    "children": [
      { "id": "2-1", "label": "Child 2-1" }
    ]
  }
]'></afp-tree-view>

<AfpTreeView data='[
  {
    "id": "1",
    "label": "Root Item 1",
    "children": [
      { "id": "1-1", "label": "Child 1-1" },
      { "id": "1-2", "label": "Child 1-2" }
    ]
  },
  {
    "id": "2",
    "label": "Root Item 2",
    "children": [
      { "id": "2-1", "label": "Child 2-1" }
    ]
  }
]'></AfpTreeView>

<AfpTreeView data='[
  {
    "id": "1",
    "label": "Root Item 1",
    "children": [
      { "id": "1-1", "label": "Child 1-1" },
      { "id": "1-2", "label": "Child 1-2" }
    ]
  },
  {
    "id": "2",
    "label": "Root Item 2",
    "children": [
      { "id": "2-1", "label": "Child 2-1" }
    ]
  }
]'></AfpTreeView>

With Icons #

Add icons to tree nodes using the icon property.

<afp-tree-view id="icon-tree"></afp-tree-view>

<script>
  const iconTree = document.getElementById('icon-tree');
  iconTree.data = [
    {
      id: '1',
      label: 'Documents',
      icon: 'folder',
      children: [
        { id: '1-1', label: 'Report.pdf', icon: 'file-earmark-pdf' },
        { id: '1-2', label: 'Presentation.pptx', icon: 'file-earmark-slides' }
      ]
    },
    {
      id: '2',
      label: 'Images',
      icon: 'folder',
      children: [
        { id: '2-1', label: 'photo.jpg', icon: 'file-earmark-image' }
      ]
    }
  ];
</script>

<afp-tree-view [id]="'icon-tree'"></afp-tree-view>

<script>
  const iconTree = document.getElementById('icon-tree');
  iconTree.data = [
    {
      id: '1',
      label: 'Documents',
      icon: 'folder',
      children: [
        { id: '1-1', label: 'Report.pdf', icon: 'file-earmark-pdf' },
        { id: '1-2', label: 'Presentation.pptx', icon: 'file-earmark-slides' }
      ]
    },
    {
      id: '2',
      label: 'Images',
      icon: 'folder',
      children: [
        { id: '2-1', label: 'photo.jpg', icon: 'file-earmark-image' }
      ]
    }
  ];
</script>

<AfpTreeView id="icon-tree"></AfpTreeView>

<script>
  const iconTree = document.getElementById('icon-tree');
  iconTree.data = [
    {
      id: '1',
      label: 'Documents',
      icon: 'folder',
      children: [
        { id: '1-1', label: 'Report.pdf', icon: 'file-earmark-pdf' },
        { id: '1-2', label: 'Presentation.pptx', icon: 'file-earmark-slides' }
      ]
    },
    {
      id: '2',
      label: 'Images',
      icon: 'folder',
      children: [
        { id: '2-1', label: 'photo.jpg', icon: 'file-earmark-image' }
      ]
    }
  ];
</script>

<AfpTreeView :id="'icon-tree'"></AfpTreeView>

<script>
  const iconTree = document.getElementById('icon-tree');
  iconTree.data = [
    {
      id: '1',
      label: 'Documents',
      icon: 'folder',
      children: [
        { id: '1-1', label: 'Report.pdf', icon: 'file-earmark-pdf' },
        { id: '1-2', label: 'Presentation.pptx', icon: 'file-earmark-slides' }
      ]
    },
    {
      id: '2',
      label: 'Images',
      icon: 'folder',
      children: [
        { id: '2-1', label: 'photo.jpg', icon: 'file-earmark-image' }
      ]
    }
  ];
</script>

Sizes #

Use the size attribute to change a tree view's size.

<div class="afp-stack">
  <afp-tree-view id="large-tree" size="large"></afp-tree-view>
  <afp-tree-view id="medium-tree" size="medium"></afp-tree-view>
  <afp-tree-view id="small-tree" size="small"></afp-tree-view>
</div>

<script>
  const largeTree = document.getElementById('large-tree');
  const mediumTree = document.getElementById('medium-tree');
  const smallTree = document.getElementById('small-tree');

  const largeTreeData = [
    {
      id: '1',
      label: 'Large Size',
      children: [
        { id: '1-1', label: 'Large Child 1-1' },
        { id: '1-2', label: 'Large Child 1-2' },
      ],
    },
  ];
  const mediumTreeData = [
    {
      id: '1',
      label: 'Medium Size (Default)',
      children: [
        { id: '1-1', label: 'Medium Child 1-1' },
        { id: '1-2', label: 'Medium Child 1-2' },
      ],
    },
  ];
    const smallTreeData = [
    {
      id: '1',
      label: 'Small Size',
      children: [
        { id: '1-1', label: 'Small Child 1-1' },
        { id: '1-2', label: 'Small Child 1-2' },
      ],
    },
  ];

  if (largeTree) largeTree.data = largeTreeData;
  if (mediumTree) mediumTree.data = mediumTreeData;
  if (smallTree) smallTree.data = smallTreeData;
</script>

<div class="afp-stack">
  <afp-tree-view [id]="'large-tree'" [size]="'large'"></afp-tree-view>
  <afp-tree-view [id]="'medium-tree'" [size]="'medium'"></afp-tree-view>
  <afp-tree-view [id]="'small-tree'" [size]="'small'"></afp-tree-view>
</div>

<script>
  const largeTree = document.getElementById('large-tree');
  const mediumTree = document.getElementById('medium-tree');
  const smallTree = document.getElementById('small-tree');

  const largeTreeData = [
    {
      id: '1',
      label: 'Large Size',
      children: [
        { id: '1-1', label: 'Large Child 1-1' },
        { id: '1-2', label: 'Large Child 1-2' },
      ],
    },
  ];
  const mediumTreeData = [
    {
      id: '1',
      label: 'Medium Size (Default)',
      children: [
        { id: '1-1', label: 'Medium Child 1-1' },
        { id: '1-2', label: 'Medium Child 1-2' },
      ],
    },
  ];
    const smallTreeData = [
    {
      id: '1',
      label: 'Small Size',
      children: [
        { id: '1-1', label: 'Small Child 1-1' },
        { id: '1-2', label: 'Small Child 1-2' },
      ],
    },
  ];

  if (largeTree) largeTree.data = largeTreeData;
  if (mediumTree) mediumTree.data = mediumTreeData;
  if (smallTree) smallTree.data = smallTreeData;
</script>

<div class="afp-stack">
  <AfpTreeView id="large-tree" size="large"></AfpTreeView>
  <AfpTreeView id="medium-tree" size="medium"></AfpTreeView>
  <AfpTreeView id="small-tree" size="small"></AfpTreeView>
</div>

<script>
  const largeTree = document.getElementById('large-tree');
  const mediumTree = document.getElementById('medium-tree');
  const smallTree = document.getElementById('small-tree');

  const largeTreeData = [
    {
      id: '1',
      label: 'Large Size',
      children: [
        { id: '1-1', label: 'Large Child 1-1' },
        { id: '1-2', label: 'Large Child 1-2' },
      ],
    },
  ];
  const mediumTreeData = [
    {
      id: '1',
      label: 'Medium Size (Default)',
      children: [
        { id: '1-1', label: 'Medium Child 1-1' },
        { id: '1-2', label: 'Medium Child 1-2' },
      ],
    },
  ];
    const smallTreeData = [
    {
      id: '1',
      label: 'Small Size',
      children: [
        { id: '1-1', label: 'Small Child 1-1' },
        { id: '1-2', label: 'Small Child 1-2' },
      ],
    },
  ];

  if (largeTree) largeTree.data = largeTreeData;
  if (mediumTree) mediumTree.data = mediumTreeData;
  if (smallTree) smallTree.data = smallTreeData;
</script>

<div class="afp-stack">
  <AfpTreeView :id="'large-tree'" :size="'large'"></AfpTreeView>
  <AfpTreeView :id="'medium-tree'" :size="'medium'"></AfpTreeView>
  <AfpTreeView :id="'small-tree'" :size="'small'"></AfpTreeView>
</div>

<script>
  const largeTree = document.getElementById('large-tree');
  const mediumTree = document.getElementById('medium-tree');
  const smallTree = document.getElementById('small-tree');

  const largeTreeData = [
    {
      id: '1',
      label: 'Large Size',
      children: [
        { id: '1-1', label: 'Large Child 1-1' },
        { id: '1-2', label: 'Large Child 1-2' },
      ],
    },
  ];
  const mediumTreeData = [
    {
      id: '1',
      label: 'Medium Size (Default)',
      children: [
        { id: '1-1', label: 'Medium Child 1-1' },
        { id: '1-2', label: 'Medium Child 1-2' },
      ],
    },
  ];
    const smallTreeData = [
    {
      id: '1',
      label: 'Small Size',
      children: [
        { id: '1-1', label: 'Small Child 1-1' },
        { id: '1-2', label: 'Small Child 1-2' },
      ],
    },
  ];

  if (largeTree) largeTree.data = largeTreeData;
  if (mediumTree) mediumTree.data = mediumTreeData;
  if (smallTree) smallTree.data = smallTreeData;
</script>

Default Expansion #

Use expanded boolean in the data to have that node open by default when the tree first renders.

<afp-tree-view id="default-expanded-tree"></afp-tree-view>

<script>
  const defaultExpandedTree = document.getElementById('default-expanded-tree');
  defaultExpandedTree.data = [
    {
      id: '1',
      label: 'Expanded Node',
      expanded: true,
      children: [
        { id: '1-1', label: 'Child 1' },
        { id: '1-2', label: 'Child 2' }
      ]
    },
    {
      id: '2',
      label: 'Normal Node',
      children: [
        { id: '2-1', label: 'Child 1' },
        { id: '2-2', label: 'Child 2' }
      ]
    }
  ];
</script>

<afp-tree-view [id]="'default-expanded-tree'"></afp-tree-view>

<script>
  const defaultExpandedTree = document.getElementById('default-expanded-tree');
  defaultExpandedTree.data = [
    {
      id: '1',
      label: 'Expanded Node',
      expanded: true,
      children: [
        { id: '1-1', label: 'Child 1' },
        { id: '1-2', label: 'Child 2' }
      ]
    },
    {
      id: '2',
      label: 'Normal Node',
      children: [
        { id: '2-1', label: 'Child 1' },
        { id: '2-2', label: 'Child 2' }
      ]
    }
  ];
</script>

<AfpTreeView id="default-expanded-tree"></AfpTreeView>

<script>
  const defaultExpandedTree = document.getElementById('default-expanded-tree');
  defaultExpandedTree.data = [
    {
      id: '1',
      label: 'Expanded Node',
      expanded: true,
      children: [
        { id: '1-1', label: 'Child 1' },
        { id: '1-2', label: 'Child 2' }
      ]
    },
    {
      id: '2',
      label: 'Normal Node',
      children: [
        { id: '2-1', label: 'Child 1' },
        { id: '2-2', label: 'Child 2' }
      ]
    }
  ];
</script>

<AfpTreeView :id="'default-expanded-tree'"></AfpTreeView>

<script>
  const defaultExpandedTree = document.getElementById('default-expanded-tree');
  defaultExpandedTree.data = [
    {
      id: '1',
      label: 'Expanded Node',
      expanded: true,
      children: [
        { id: '1-1', label: 'Child 1' },
        { id: '1-2', label: 'Child 2' }
      ]
    },
    {
      id: '2',
      label: 'Normal Node',
      children: [
        { id: '2-1', label: 'Child 1' },
        { id: '2-2', label: 'Child 2' }
      ]
    }
  ];
</script>

Multi-Select #

Use the multiSelect attribute to enable selecting multiple nodes.

<afp-tree-view id="multi-tree" multiselect></afp-tree-view>
<div id="multi-selection" style="margin-top: var(--afp-space-m); padding: var(--afp-space-s); background: var(--afp-color-neutral-fill-hover); border-radius: var(--afp-border-radius-s);"></div>

<script>
  const multiSelectTree = document.getElementById('multi-tree');
  const multiSelection = document.getElementById('multi-selection');
  
  multiSelectTree.data = [
    {
      id: 'Item 1',
      label: 'Item 1',
      children: [
        { id: 'Item 1-1', label: 'Item 1-1' },
        { id: 'Item 1-2', label: 'Item 1-2' }
      ]
    },
    {
      id: 'Item 2',
      label: 'Item 2',
      children: [
        { id: 'Item 2-1', label: 'Item 2-1' },
        { id: 'Item 2-2', label: 'Item 2-2' },
      ]
    },
    {
      id: 'Item 3',
      label: 'Item 3',
      children: [
        { id: 'Item 3-1', label: 'Item 3-1' },
        { id: 'Item 3-2', label: 'Item 3-2' },
      ]
    }
  ];
  
  // Pre-select some nodes
  multiSelectTree.selectedIds = ['Item 1-1', 'Item 2-1', 'Item 2-2'];
  
  // Update display
  const updateSelection = () => {
    const selected = multiSelectTree.selectedIds;
    multiSelection.innerHTML = selected.length > 0 
      ? `<b>Selected Items: </b>${selected.join(', ')}`
      : 'No items selected';
  };
  
  updateSelection();
  
  multiSelectTree.addEventListener('afp-change', () => {
    updateSelection();
  });
</script>

<afp-tree-view [id]="'multi-tree'" multiselect></afp-tree-view>
<div id="multi-selection" style="margin-top: var(--afp-space-m); padding: var(--afp-space-s); background: var(--afp-color-neutral-fill-hover); border-radius: var(--afp-border-radius-s);"></div>

<script>
  const multiSelectTree = document.getElementById('multi-tree');
  const multiSelection = document.getElementById('multi-selection');
  
  multiSelectTree.data = [
    {
      id: 'Item 1',
      label: 'Item 1',
      children: [
        { id: 'Item 1-1', label: 'Item 1-1' },
        { id: 'Item 1-2', label: 'Item 1-2' }
      ]
    },
    {
      id: 'Item 2',
      label: 'Item 2',
      children: [
        { id: 'Item 2-1', label: 'Item 2-1' },
        { id: 'Item 2-2', label: 'Item 2-2' },
      ]
    },
    {
      id: 'Item 3',
      label: 'Item 3',
      children: [
        { id: 'Item 3-1', label: 'Item 3-1' },
        { id: 'Item 3-2', label: 'Item 3-2' },
      ]
    }
  ];
  
  // Pre-select some nodes
  multiSelectTree.selectedIds = ['Item 1-1', 'Item 2-1', 'Item 2-2'];
  
  // Update display
  const updateSelection = () => {
    const selected = multiSelectTree.selectedIds;
    multiSelection.innerHTML = selected.length > 0 
      ? `<b>Selected Items: </b>${selected.join(', ')}`
      : 'No items selected';
  };
  
  updateSelection();
  
  multiSelectTree.addEventListener('afp-change', () => {
    updateSelection();
  });
</script>

<AfpTreeView id="multi-tree" multiselect></AfpTreeView>
<div id="multi-selection" style="margin-top: var(--afp-space-m); padding: var(--afp-space-s); background: var(--afp-color-neutral-fill-hover); border-radius: var(--afp-border-radius-s);"></div>

<script>
  const multiSelectTree = document.getElementById('multi-tree');
  const multiSelection = document.getElementById('multi-selection');
  
  multiSelectTree.data = [
    {
      id: 'Item 1',
      label: 'Item 1',
      children: [
        { id: 'Item 1-1', label: 'Item 1-1' },
        { id: 'Item 1-2', label: 'Item 1-2' }
      ]
    },
    {
      id: 'Item 2',
      label: 'Item 2',
      children: [
        { id: 'Item 2-1', label: 'Item 2-1' },
        { id: 'Item 2-2', label: 'Item 2-2' },
      ]
    },
    {
      id: 'Item 3',
      label: 'Item 3',
      children: [
        { id: 'Item 3-1', label: 'Item 3-1' },
        { id: 'Item 3-2', label: 'Item 3-2' },
      ]
    }
  ];
  
  // Pre-select some nodes
  multiSelectTree.selectedIds = ['Item 1-1', 'Item 2-1', 'Item 2-2'];
  
  // Update display
  const updateSelection = () => {
    const selected = multiSelectTree.selectedIds;
    multiSelection.innerHTML = selected.length > 0 
      ? `<b>Selected Items: </b>${selected.join(', ')}`
      : 'No items selected';
  };
  
  updateSelection();
  
  multiSelectTree.addEventListener('afp-change', () => {
    updateSelection();
  });
</script>

<AfpTreeView :id="'multi-tree'" multiselect></AfpTreeView>
<div id="multi-selection" style="margin-top: var(--afp-space-m); padding: var(--afp-space-s); background: var(--afp-color-neutral-fill-hover); border-radius: var(--afp-border-radius-s);"></div>

<script>
  const multiSelectTree = document.getElementById('multi-tree');
  const multiSelection = document.getElementById('multi-selection');
  
  multiSelectTree.data = [
    {
      id: 'Item 1',
      label: 'Item 1',
      children: [
        { id: 'Item 1-1', label: 'Item 1-1' },
        { id: 'Item 1-2', label: 'Item 1-2' }
      ]
    },
    {
      id: 'Item 2',
      label: 'Item 2',
      children: [
        { id: 'Item 2-1', label: 'Item 2-1' },
        { id: 'Item 2-2', label: 'Item 2-2' },
      ]
    },
    {
      id: 'Item 3',
      label: 'Item 3',
      children: [
        { id: 'Item 3-1', label: 'Item 3-1' },
        { id: 'Item 3-2', label: 'Item 3-2' },
      ]
    }
  ];
  
  // Pre-select some nodes
  multiSelectTree.selectedIds = ['Item 1-1', 'Item 2-1', 'Item 2-2'];
  
  // Update display
  const updateSelection = () => {
    const selected = multiSelectTree.selectedIds;
    multiSelection.innerHTML = selected.length > 0 
      ? `<b>Selected Items: </b>${selected.join(', ')}`
      : 'No items selected';
  };
  
  updateSelection();
  
  multiSelectTree.addEventListener('afp-change', () => {
    updateSelection();
  });
</script>

Disabled Nodes #

Use the disabled property on individual nodes to disable them.

<afp-tree-view id="disabled-tree"></afp-tree-view>

<script>
  const disabledNodeTree = document.getElementById('disabled-tree');
  disabledNodeTree.data = [
    {
      id: '1',
      label: 'Active Item',
      children: [
        { id: '1-1', label: 'Active Child' },
        { id: '1-2', label: 'Disabled Child', disabled: true }
      ]
    },
    {
      id: '2',
      label: 'Disabled Item',
      disabled: true,
      children: [
        { id: '2-1', label: 'Child' }
      ]
    }
  ];
</script>

<afp-tree-view [id]="'disabled-tree'"></afp-tree-view>

<script>
  const disabledNodeTree = document.getElementById('disabled-tree');
  disabledNodeTree.data = [
    {
      id: '1',
      label: 'Active Item',
      children: [
        { id: '1-1', label: 'Active Child' },
        { id: '1-2', label: 'Disabled Child', disabled: true }
      ]
    },
    {
      id: '2',
      label: 'Disabled Item',
      disabled: true,
      children: [
        { id: '2-1', label: 'Child' }
      ]
    }
  ];
</script>

<AfpTreeView id="disabled-tree"></AfpTreeView>

<script>
  const disabledNodeTree = document.getElementById('disabled-tree');
  disabledNodeTree.data = [
    {
      id: '1',
      label: 'Active Item',
      children: [
        { id: '1-1', label: 'Active Child' },
        { id: '1-2', label: 'Disabled Child', disabled: true }
      ]
    },
    {
      id: '2',
      label: 'Disabled Item',
      disabled: true,
      children: [
        { id: '2-1', label: 'Child' }
      ]
    }
  ];
</script>

<AfpTreeView :id="'disabled-tree'"></AfpTreeView>

<script>
  const disabledNodeTree = document.getElementById('disabled-tree');
  disabledNodeTree.data = [
    {
      id: '1',
      label: 'Active Item',
      children: [
        { id: '1-1', label: 'Active Child' },
        { id: '1-2', label: 'Disabled Child', disabled: true }
      ]
    },
    {
      id: '2',
      label: 'Disabled Item',
      disabled: true,
      children: [
        { id: '2-1', label: 'Child' }
      ]
    }
  ];
</script>

Disabled Tree View #

Use the disabled attribute to disable the entire tree view.

<afp-tree-view id="disabled-all" disabled></afp-tree-view>

<script>
  const disabledTree = document.getElementById('disabled-all');
  disabledTree.data = [
    {
      id: '1',
      label: 'Item 1',
      children: [
        { id: '1-1', label: 'Child 1-1' }
      ]
    }
  ];
</script>

<afp-tree-view [id]="'disabled-all'" disabled></afp-tree-view>

<script>
  const disabledTree = document.getElementById('disabled-all');
  disabledTree.data = [
    {
      id: '1',
      label: 'Item 1',
      children: [
        { id: '1-1', label: 'Child 1-1' }
      ]
    }
  ];
</script>

<AfpTreeView id="disabled-all" disabled></AfpTreeView>

<script>
  const disabledTree = document.getElementById('disabled-all');
  disabledTree.data = [
    {
      id: '1',
      label: 'Item 1',
      children: [
        { id: '1-1', label: 'Child 1-1' }
      ]
    }
  ];
</script>

<AfpTreeView :id="'disabled-all'" disabled></AfpTreeView>

<script>
  const disabledTree = document.getElementById('disabled-all');
  disabledTree.data = [
    {
      id: '1',
      label: 'Item 1',
      children: [
        { id: '1-1', label: 'Child 1-1' }
      ]
    }
  ];
</script>

Selection Events #

Use the afp-select event to listen for single node selections.

<afp-tree-view id="select-tree"></afp-tree-view>
<div id="output"></div>

<script>
  const selectTree = document.getElementById('select-tree');
  const output = document.getElementById('output');
  
  selectTree.data = [
    {
      id: '1',
      label: 'Item 1',
      children: [
        { id: '1-1', label: 'Child 1-1' },
        { id: '1-2', label: 'Child 1-2' }
      ]
    }
  ];

  selectTree.addEventListener('afp-select', (event) => {
    output.textContent = `Selected: ${event.detail.label} (ID: ${event.detail.id})`;
  });
</script>

<afp-tree-view [id]="'select-tree'"></afp-tree-view>
<div id="output"></div>

<script>
  const selectTree = document.getElementById('select-tree');
  const output = document.getElementById('output');
  
  selectTree.data = [
    {
      id: '1',
      label: 'Item 1',
      children: [
        { id: '1-1', label: 'Child 1-1' },
        { id: '1-2', label: 'Child 1-2' }
      ]
    }
  ];

  selectTree.addEventListener('afp-select', (event) => {
    output.textContent = `Selected: ${event.detail.label} (ID: ${event.detail.id})`;
  });
</script>

<AfpTreeView id="select-tree"></AfpTreeView>
<div id="output"></div>

<script>
  const selectTree = document.getElementById('select-tree');
  const output = document.getElementById('output');
  
  selectTree.data = [
    {
      id: '1',
      label: 'Item 1',
      children: [
        { id: '1-1', label: 'Child 1-1' },
        { id: '1-2', label: 'Child 1-2' }
      ]
    }
  ];

  selectTree.addEventListener('afp-select', (event) => {
    output.textContent = `Selected: ${event.detail.label} (ID: ${event.detail.id})`;
  });
</script>

<AfpTreeView :id="'select-tree'"></AfpTreeView>
<div id="output"></div>

<script>
  const selectTree = document.getElementById('select-tree');
  const output = document.getElementById('output');
  
  selectTree.data = [
    {
      id: '1',
      label: 'Item 1',
      children: [
        { id: '1-1', label: 'Child 1-1' },
        { id: '1-2', label: 'Child 1-2' }
      ]
    }
  ];

  selectTree.addEventListener('afp-select', (event) => {
    output.textContent = `Selected: ${event.detail.label} (ID: ${event.detail.id})`;
  });
</script>

Programmatic Control #

Use the public methods to control the tree view programmatically.

Expand All

Collapse All

Select First

Clear Selection

<div class="afp-stack">
  <div class="afp-cluster">
    <afp-tree-view id="control-tree"></afp-tree-view>
  </div>
  <div class="afp-cluster">
    <afp-button id="expand-all" appearance="plain" variant="brand" size="small">Expand All</afp-button>
    <afp-button id="collapse-all" appearance="plain" variant="brand" size="small">Collapse All</afp-button>
    <afp-button id="select-first" appearance="plain" variant="brand" size="small">Select First</afp-button>
    <afp-button id="clear-selection" appearance="plain" variant="brand" size="small">Clear Selection</afp-button>
  </div>
</div>

<script>
  const programmaticTree = document.getElementById('control-tree');
  
  programmaticTree.data = [
    {
      id: '1',
      label: 'Item 1',
      children: [
        { id: '1-1', label: 'Child 1-1' },
        { id: '1-2', label: 'Child 1-2' }
      ]
    },
    {
      id: '2',
      label: 'Item 2',
      children: [
        { id: '2-1', label: 'Child 2-1' }
      ]
    }
  ];

  document.getElementById('expand-all').addEventListener('click', () => {
    programmaticTree.expandAll();
  });

  document.getElementById('collapse-all').addEventListener('click', () => {
    programmaticTree.collapseAll();
  });

  document.getElementById('select-first').addEventListener('click', () => {
    programmaticTree.selectNode('1');
  });

  document.getElementById('clear-selection').addEventListener('click', () => {
    programmaticTree.clearSelection();
  });
</script>

<div class="afp-stack">
  <div class="afp-cluster">
    <afp-tree-view [id]="'control-tree'"></afp-tree-view>
  </div>
  <div class="afp-cluster">
    <afp-button [id]="'expand-all'" [appearance]="'plain'" [variant]="'brand'" [size]="'small'">Expand All</afp-button>
    <afp-button [id]="'collapse-all'" [appearance]="'plain'" [variant]="'brand'" [size]="'small'">Collapse All</afp-button>
    <afp-button [id]="'select-first'" [appearance]="'plain'" [variant]="'brand'" [size]="'small'">Select First</afp-button>
    <afp-button [id]="'clear-selection'" [appearance]="'plain'" [variant]="'brand'" [size]="'small'">Clear Selection</afp-button>
  </div>
</div>

<script>
  const programmaticTree = document.getElementById('control-tree');
  
  programmaticTree.data = [
    {
      id: '1',
      label: 'Item 1',
      children: [
        { id: '1-1', label: 'Child 1-1' },
        { id: '1-2', label: 'Child 1-2' }
      ]
    },
    {
      id: '2',
      label: 'Item 2',
      children: [
        { id: '2-1', label: 'Child 2-1' }
      ]
    }
  ];

  document.getElementById('expand-all').addEventListener('click', () => {
    programmaticTree.expandAll();
  });

  document.getElementById('collapse-all').addEventListener('click', () => {
    programmaticTree.collapseAll();
  });

  document.getElementById('select-first').addEventListener('click', () => {
    programmaticTree.selectNode('1');
  });

  document.getElementById('clear-selection').addEventListener('click', () => {
    programmaticTree.clearSelection();
  });
</script>

<div class="afp-stack">
  <div class="afp-cluster">
    <AfpTreeView id="control-tree"></AfpTreeView>
  </div>
  <div class="afp-cluster">
    <AfpButton id="expand-all" appearance="plain" variant="brand" size="small">Expand All</AfpButton>
    <AfpButton id="collapse-all" appearance="plain" variant="brand" size="small">Collapse All</AfpButton>
    <AfpButton id="select-first" appearance="plain" variant="brand" size="small">Select First</AfpButton>
    <AfpButton id="clear-selection" appearance="plain" variant="brand" size="small">Clear Selection</AfpButton>
  </div>
</div>

<script>
  const programmaticTree = document.getElementById('control-tree');
  
  programmaticTree.data = [
    {
      id: '1',
      label: 'Item 1',
      children: [
        { id: '1-1', label: 'Child 1-1' },
        { id: '1-2', label: 'Child 1-2' }
      ]
    },
    {
      id: '2',
      label: 'Item 2',
      children: [
        { id: '2-1', label: 'Child 2-1' }
      ]
    }
  ];

  document.getElementById('expand-all').addEventListener('click', () => {
    programmaticTree.expandAll();
  });

  document.getElementById('collapse-all').addEventListener('click', () => {
    programmaticTree.collapseAll();
  });

  document.getElementById('select-first').addEventListener('click', () => {
    programmaticTree.selectNode('1');
  });

  document.getElementById('clear-selection').addEventListener('click', () => {
    programmaticTree.clearSelection();
  });
</script>

<div class="afp-stack">
  <div class="afp-cluster">
    <AfpTreeView :id="'control-tree'"></AfpTreeView>
  </div>
  <div class="afp-cluster">
    <AfpButton :id="'expand-all'" :appearance="'plain'" :variant="'brand'" :size="'small'">Expand All</AfpButton>
    <AfpButton :id="'collapse-all'" :appearance="'plain'" :variant="'brand'" :size="'small'">Collapse All</AfpButton>
    <AfpButton :id="'select-first'" :appearance="'plain'" :variant="'brand'" :size="'small'">Select First</AfpButton>
    <AfpButton :id="'clear-selection'" :appearance="'plain'" :variant="'brand'" :size="'small'">Clear Selection</AfpButton>
  </div>
</div>

<script>
  const programmaticTree = document.getElementById('control-tree');
  
  programmaticTree.data = [
    {
      id: '1',
      label: 'Item 1',
      children: [
        { id: '1-1', label: 'Child 1-1' },
        { id: '1-2', label: 'Child 1-2' }
      ]
    },
    {
      id: '2',
      label: 'Item 2',
      children: [
        { id: '2-1', label: 'Child 2-1' }
      ]
    }
  ];

  document.getElementById('expand-all').addEventListener('click', () => {
    programmaticTree.expandAll();
  });

  document.getElementById('collapse-all').addEventListener('click', () => {
    programmaticTree.collapseAll();
  });

  document.getElementById('select-first').addEventListener('click', () => {
    programmaticTree.selectNode('1');
  });

  document.getElementById('clear-selection').addEventListener('click', () => {
    programmaticTree.clearSelection();
  });
</script>

Custom Data #

Use the data property on nodes to store custom data.

<afp-tree-view id="custom-data-tree"></afp-tree-view>

<script>
  const customTree = document.getElementById('custom-data-tree');
  
  customTree.data = [
    {
      id: '1',
      label: 'User 1',
      icon: 'person',
      data: { email: 'user1@example.com', role: 'admin' }
    },
    {
      id: '2',
      label: 'User 2',
      icon: 'person',
      data: { email: 'user2@example.com', role: 'user' }
    }
  ];

  customTree.addEventListener('afp-select', (event) => {
    console.log('Selected node data:', event.detail.data);
  });
</script>

<afp-tree-view [id]="'custom-data-tree'"></afp-tree-view>

<script>
  const customTree = document.getElementById('custom-data-tree');
  
  customTree.data = [
    {
      id: '1',
      label: 'User 1',
      icon: 'person',
      data: { email: 'user1@example.com', role: 'admin' }
    },
    {
      id: '2',
      label: 'User 2',
      icon: 'person',
      data: { email: 'user2@example.com', role: 'user' }
    }
  ];

  customTree.addEventListener('afp-select', (event) => {
    console.log('Selected node data:', event.detail.data);
  });
</script>

<AfpTreeView id="custom-data-tree"></AfpTreeView>

<script>
  const customTree = document.getElementById('custom-data-tree');
  
  customTree.data = [
    {
      id: '1',
      label: 'User 1',
      icon: 'person',
      data: { email: 'user1@example.com', role: 'admin' }
    },
    {
      id: '2',
      label: 'User 2',
      icon: 'person',
      data: { email: 'user2@example.com', role: 'user' }
    }
  ];

  customTree.addEventListener('afp-select', (event) => {
    console.log('Selected node data:', event.detail.data);
  });
</script>

<AfpTreeView :id="'custom-data-tree'"></AfpTreeView>

<script>
  const customTree = document.getElementById('custom-data-tree');
  
  customTree.data = [
    {
      id: '1',
      label: 'User 1',
      icon: 'person',
      data: { email: 'user1@example.com', role: 'admin' }
    },
    {
      id: '2',
      label: 'User 2',
      icon: 'person',
      data: { email: 'user2@example.com', role: 'user' }
    }
  ];

  customTree.addEventListener('afp-select', (event) => {
    console.log('Selected node data:', event.detail.data);
  });
</script>

Deep Nesting #

The tree view supports unlimited nesting levels.

<afp-tree-view id="nested-tree"></afp-tree-view>

<script>
  const deepTree = document.getElementById('nested-tree');
  deepTree.data = [
    {
      id: '1',
      label: 'Level 1',
      children: [
        {
          id: '1-1',
          label: 'Level 2',
          children: [
            {
              id: '1-1-1',
              label: 'Level 3',
              children: [
                { id: '1-1-1-1', label: 'Level 4' }
              ]
            }
          ]
        }
      ]
    }
  ];
</script>

<afp-tree-view [id]="'nested-tree'"></afp-tree-view>

<script>
  const deepTree = document.getElementById('nested-tree');
  deepTree.data = [
    {
      id: '1',
      label: 'Level 1',
      children: [
        {
          id: '1-1',
          label: 'Level 2',
          children: [
            {
              id: '1-1-1',
              label: 'Level 3',
              children: [
                { id: '1-1-1-1', label: 'Level 4' }
              ]
            }
          ]
        }
      ]
    }
  ];
</script>

<AfpTreeView id="nested-tree"></AfpTreeView>

<script>
  const deepTree = document.getElementById('nested-tree');
  deepTree.data = [
    {
      id: '1',
      label: 'Level 1',
      children: [
        {
          id: '1-1',
          label: 'Level 2',
          children: [
            {
              id: '1-1-1',
              label: 'Level 3',
              children: [
                { id: '1-1-1-1', label: 'Level 4' }
              ]
            }
          ]
        }
      ]
    }
  ];
</script>

<AfpTreeView :id="'nested-tree'"></AfpTreeView>

<script>
  const deepTree = document.getElementById('nested-tree');
  deepTree.data = [
    {
      id: '1',
      label: 'Level 1',
      children: [
        {
          id: '1-1',
          label: 'Level 2',
          children: [
            {
              id: '1-1-1',
              label: 'Level 3',
              children: [
                { id: '1-1-1-1', label: 'Level 4' }
              ]
            }
          ]
        }
      ]
    }
  ];
</script>

Properties

Learn more about properties.

Name Description Reflects

size

size of the tree view.

Type

AfpSize

Name	Description
`SMALL`	Small size with compact dimensions.
`MEDIUM`	Medium size with standard dimensions.
`LARGE`	Large size with expanded dimensions.

AfpSize

Default AfpSize.MEDIUM

data

tree data structure

Type AfpTreeNode[]

Default []

multiSelect
multiselect

enable multi-selection

Type boolean

Default false

selectedIds
selectedids

selected node IDs

Type string[]

Default []

disabled

disabled state of the tree view

Type boolean

Default false

Methods

Learn more about using methods.

Name	Description	Arguments
`expandNode`	This method expands a node by its ID. It can be used to programmatically expand a node without user interaction.	`nodeId<string>`
`collapseNode`	This method collapses a node by its ID. It can be used to programmatically collapse a node without user interaction.	`nodeId<string>`
`expandAll`	This method expands all nodes in the tree. It can be used to programmatically expand all nodes without user interaction.	-
`collapseAll`	This method collapses all nodes in the tree. It can be used to programmatically collapse all nodes without user interaction.	-
`selectNode`	This method selects a node by its ID. It can be used to programmatically select a node without user interaction.	`nodeId<string>`
`deselectNode`	This method deselects a node by its ID.	`nodeId<string>`
`clearSelection`	This method clears all selections in the tree.	-

Events

Learn more about events.

Name	Return	Description
`afp-select`	`AfpTreeNode`	Emitted when a node is selected.
`afp-change`	`AfpTreeNode[]`	Emitted when the selection changes.

CSS Parts

Learn more about CSS Parts.

Name	Description	Selector
`base`	The component's base wrapper.	`::part(base)`
`tree`	The tree container element.	`::part(tree)`
`node`	A tree node container.	`::part(node)`
`node-content`	The content wrapper of a node.	`::part(node-content)`
`node-toggle`	The toggle button for expanding/collapsing.	`::part(node-toggle)`
`toggle-icon`	The chevron icon for toggle.	`::part(toggle-icon)`
`node-checkbox`	The checkbox element shown in multi-select mode.	`::part(node-checkbox)`
`node-icon`	The icon of a node.	`::part(node-icon)`
`node-label`	The label text of a node.	`::part(node-label)`
`children`	The children container of a node.	`::part(children)`

CSS Custom Properties

Name	Description	Default
`--afp-tree-view-disabled-opacity`	The opacity of the tree view when disabled.	`0.5`

Dependencies

The component automatically brings in the listed items, including any nested dependencies that may exist.

Component	CSS Part Prefix
afp-icon	`toggle-icon` - The chevron icon for toggle. `node-icon` - The icon of a node.
afp-checkbox	`node-checkbox` - The checkbox element shown in multi-select mode.

Importing

Using the bundle is the recommended method to include components. If you’d rather handle imports manually, you can use the code examples below.

import '@afp-design-system/core/dist/components/tree-view/tree-view.js';