# TreeSelect

Single selection from a hierarchical collection inside a popup.

Connect Flood once using [the installation guide](https://flood.md/docs/installation). Then import the components you use; no per-component add command is needed.

## Example

```tsx
"use client";

import { FloodRoot, TreeSelect } from "@flood-md/react";
import "@flood-md/react/styles.css";

export function Example() {
  return (
    <FloodRoot>
      <TreeSelect label="Destination" name="destination" items={[{value:"design",label:"Design",selectable:false,children:[{value:"foundations",label:"Foundations"},{value:"components",label:"Components"}]}]} />
    </FloodRoot>
  );
}
```

## Design notes

- This first version selects one item; Tree provides standalone multiple selection.
- Values are globally unique and expansion remains independent of selection.

## API reference

| Prop | Values | Default |
| --- | --- | --- |
| `label` | `string` | `Required` |
| `hideLabel` | `boolean` | `—` |
| `items` | `readonly TreeItem[]` | `Required` |
| `value` | `string` | `—` |
| `defaultValue` | `string` | `—` |
| `onValueChange` | `(value: string) => void` | `—` |
| `placeholder` | `string` | `—` |
| `name` | `string` | `—` |
| `form` | `string` | `—` |
| `required` | `boolean` | `—` |
| `disabled` | `boolean` | `—` |
| `readOnly` | `boolean` | `—` |
| `invalid` | `boolean` | `—` |
| `status` | `"error" \| "warning" \| "success" \| "info"` | `—` |
| `controlSize` | `"sm" \| "md" \| "lg" \| "xl"` | `—` |
| `open` | `boolean` | `—` |
| `defaultOpen` | `boolean` | `—` |
| `onOpenChange` | `(open: boolean) => void` | `—` |
| `expandedValues` | `readonly string[]` | `—` |
| `defaultExpandedValues` | `readonly string[]` | `—` |
| `onExpandedValuesChange` | `(values: string[]) => void` | `—` |
| `emptyMessage` | `string` | `—` |
| `invalidSelectionMessage` | `string` | `—` |
| `Native HTML props` | `Omit<HTMLAttributes<HTMLDivElement>, "children" \| "onChange" \| "defaultValue">` | `Forwarded` |