Component size, gzipped: 14kb

Tree View

Examples

Controlled Tree View Usage

  • Check Indeterminate
    Node 1
    • Check Indeterminate
      Child 1
  • Check Indeterminate
    Node 2
    • Check Indeterminate
      Child 2

Uncontrolled Tree View Usage

  • Check Indeterminate
    Node 1
    • Check Indeterminate
      Child 1
  • Check Indeterminate
    Node 2
    • Check Indeterminate
      Child 2

Custom labels Usage

  • Check Indeterminate
    Coffee$2
    • Medium$1
  • Check Indeterminate
    Pizza$8
    • Large$2

Overrides Usage

  • Chevron Down
    Node 1
    • Chevron Down
      Child 1
  • Chevron Down
    Node 2
    • Chevron Down
      Child 2

Accessibility

Aria rules are applied based on recommendations for Tree View WAI-ARIA Authoring Practices 1.1.

  • Expanded tree node will have 'aria-expanded' set to true.
  • Collapsed tree node will have 'aria-expanded' set to false.

API

Tree View exports

You can import this module like so:

import {Unstable_TreeView} from 'baseui/tree-view'

It exports the following components or utility functions: