Tree Select

A dropdown selector with a hierarchical tree structure — ideal for selecting categories, org chart nodes, or nested data.

Installation

dotnet add package Lumeo

One-time app setup (AddLumeo(), CSS & JS) is covered in the installation guide.

@using Lumeo

<TreeSelect />

Basic Tree Select

Selected: none

Searchable

Multi-select

Selected:

Expand All

With Disabled Items

Property	Type	Default	Description
Value	string?	—	The selected item value (single-select mode). Supports two-way binding.
Values	List<string>?	—	Selected item values (multi-select mode). Supports two-way binding.
Items	List<TreeSelectItem>	[]	The tree data. Each item can have Children for nesting.
Placeholder	string	"Select..."	Placeholder shown when no value is selected.
Searchable	bool	false	Enable a search box at the top of the dropdown.
Multiple	bool	false	Allow selecting multiple items (use Values/ValuesChanged).
ExpandAll	bool	false	Expand all nodes by default when the dropdown opens.
Disabled	bool	false	Disable the select control.
ValueChanged	EventCallback<string>	—	Two-way binding callback (single-select mode).
ValuesChanged	EventCallback<List<string>?>	—	Two-way binding callback (multi-select mode).
Required	bool	false	Marks the field as required. Syncs with a parent FormField.
Invalid	bool	false	Applies error styling. Syncs with a parent FormField.
ErrorText	string?	null	Error message displayed below the field when Invalid is true.
HelperText	string?	null	Helper text shown below the field when not invalid.
Label	string?	null	Label rendered above the field (standalone, without FormField).
Name	string?	null	HTML name attribute for form submission.
FormField	FormField.FormFieldContext?	null	Cascaded context from a parent FormField; wires label, validation, and required state automatically.

Property	Type	Description
Label	string	Display text for the node.
Value	string	Unique value for the node used in selection.
Children	List<TreeSelectItem>?	Child nodes for nested tree structure.
Disabled	bool	Prevent this node from being selected.
Icon	string?	Optional icon shown before the label.