TreeSelect

A Select whose options are a tree: the field opens a hierarchy rather than a flat list, with checkable nodes for multiple values.

Basic

Pass treeData as nested nodes with a title, value and key each.

Allow clear

Add allowClear to show a clear button on hover, which sets the value back to undefined.

Sizes

Set size to small, medium or large to match the field to the controls around it.

Variants

Set variant to outlined, filled, text, underlined, borderless or bare to change how the field is drawn. text fills on hover and while open, and bare draws nothing at all.

Status

Set status to warning or error to color the border, like when a form field fails validation.

Multiple

Add multiple to pick several nodes, each shown as a chip you can remove, with no checkboxes in the tree.

Checkable

Add treeCheckable to put a checkbox on every node, where checking a parent checks all of its children.

Checked strategy

Set showCheckedStrategy to choose what a fully checked branch reports: its children, the parent alone, or every node.

Check strictly

Add treeCheckStrictly to check parents and children independently, which makes each value a { value, label } object.

Max count

Set maxCount with multiple to cap how many nodes can be picked, which disables the rest once the limit is reached.

Tree lines

Add treeLine to draw lines between parent and child nodes in the dropdown tree.

Load on expand

Pass loadData to fetch a node's children when it is expanded, here as flat treeDataSimpleMode rows appended to state.

In a form

Put TreeSelect in a Form.Item with rules to require a choice, here a department picked from a team tree.

API Reference

TreeSelect
TreeSelect's props. Rows marked antuikit in the Version column are added by the kit.
showSearch
showSearch's props.
TreeNode
TreeNode's props, the fields of a treeData entry.