TreeSelect

Use TreeSelect for folders, categories, organization units, and nested settings. It keeps selection explicit while preserving a compact trigger.

#Default usage

<TreeSelect
  placeholder="Choose destination"
  items={[
    {
      value: "docs",
      label: "Docs",
      children: [
        { value: "components", label: "Components" },
        { value: "resources", label: "Resources" }
      ]
    },
    { value: "examples", label: "Examples" }
  ]}
  searchable
/>

#Import

import { TreeSelect } from "@froggdesign/enter-ui-react";

#Accessibility

The trigger is a button with popup state, and options use tree/list semantics. Keyboard navigation supports arrows, Enter, and Escape.

#API

• items accepts nested { value, label, children, disabled } nodes.
• value, defaultValue, and onValueChange.
• placeholder, disabled, and searchable.

#Styling

TreeSelect uses .eui-tree-select classes and FroggDesign tokens for trigger, popover, item, depth, focus, and selected states.