TreeView

TreeView is for sidebar hierarchies, file explorers, and nested product navigation where disclosure state should stay explicit.

#Default usage

<TreeView>
  <TreeItem defaultOpen>
    <TreeItemTrigger>Components</TreeItemTrigger>
    <TreeItemContent>
      <TreeItem>
        <TreeItemTrigger>Forms</TreeItemTrigger>
        <TreeItemContent>Input, Select, MultiSelect</TreeItemContent>
      </TreeItem>
    </TreeItemContent>
  </TreeItem>
</TreeView>

#Import

import {
  TreeItem,
  TreeItemContent,
  TreeItemTrigger,
  TreeView,
} from "@froggdesign/enter-ui-react";

#States

#Accessibility

TreeView renders a tree root, treeitem triggers, aria-expanded, and grouped content. ArrowRight opens an item and ArrowLeft closes it.

#API

• TreeView renders the tree root.
• TreeItem supports open, defaultOpen, disabled, and onOpenChange.
• TreeItemTrigger renders the interactive row.
• TreeItemContent renders the nested group.

#Styling

Every exported component accepts className when it renders an element. EnterUI styles use .eui-* classes and --eui-* variables mapped from FroggDesign theme tokens.