Data Entry

TreeSelect

A select dropdown that renders its options as an expandable tree. Supports single and multiple selection, search, and programmatic expansion.

Single select

Multiple select

Installation

npx benflux-ui add tree-select

Multiple selection

const [selected, setSelected] = useState<string[]>([])

<TreeSelect
  treeData={treeData}
  value={selected}
  onChange={(v) => setSelected(v as string[])}
  multiple
  maxTagCount={3}
  treeDefaultExpandAll
/>

Props

Prop	Type	Default	Description
treeData*	TreeSelectNode[]	—	Hierarchical data
value	string \| string[]	—	Controlled selection. String for single, string[] for multiple.
defaultValue	string \| string[]	—	Initial selection (uncontrolled)
onChange	(value: string \| string[]) => void	—	Called when selection changes
multiple	boolean	false	Enable multi-select
placeholder	string	"Select..."	Trigger placeholder
showSearch	boolean	false	Show a search field inside the dropdown
allowClear	boolean	false	Show a clear button
treeDefaultExpandAll	boolean	false	Expand all nodes by default
treeDefaultExpandedKeys	string[]	[]	Keys of nodes to expand initially
maxTagCount	number	—	Maximum number of tags shown (multiple mode)
disabled	boolean	false	Disable the select
notFoundContent	string	"No data"	Shown when search finds nothing

TreeSelectNode

interface TreeSelectNode {
  value: string
  label: string
  disabled?: boolean
  children?: TreeSelectNode[]
}