TreeSelect

Single selection from a hierarchical collection inside a popup.

Preview

Destination

Size

HideLabel

Required

Read only

Disabled

Use TreeSelect

TreeSelect is a named export of @flood-md/react. Connect the package once, then import what you use.

First time here? Connect Flood

PackageProject UI

"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

View TypeScript source

Page Markdown Agent skill