TreeSelect
A Select whose options are a tree: the field opens a hierarchy rather than a flat list, with checkable nodes for multiple values.
Anotomy
Structure of the tree select and how its internal parts are composed. These are its semantic parts, so they are also what the
classNames and styles objects accept. The popup's parts go in a nested popup object. The clear button from allowClear has no key of its own.Single
| Name | Description | |
|---|---|---|
1 | root | The field's box: border, background, radius and padding. variant, size and status change it here. |
2 | prefix | The node from prefix, before the selection. |
3 | placeholder | The placeholder text, shown while nothing is chosen. |
4 | suffix | The arrow at the end. suffixIcon replaces it. |
5 | popup.root | The dropdown panel holding the tree. It is portalled to <body>, so these keys are how you reach it. |
6 | popup.item | One row of the tree, from a node in treeData. |
7 | popup.itemSwitcher | The caret that opens and closes a node with children. switcherIcon replaces it. |
8 | popup.itemTitle | A row's label, from the node's title. |
Multiple
With multiple or treeCheckable set, each chosen node becomes a tag with its own three parts.
| Name | Description | |
|---|---|---|
1 | root | The field's box. It grows in height when the tags wrap. |
2 | prefix | The node from prefix, before the tags. |
3 | content | The area that holds the tags and the search input. |
4 | item | One tag for a chosen node. maxTagCount folds the rest into a "+N" tag. |
5 | itemContent | A tag's label. |
6 | itemRemove | A tag's remove button. |
7 | suffix | The arrow at the end, or a search glyph while the popup is open. |
8 | popup.root | The dropdown panel. |
9 | popup.item | One row of the tree. The chosen rows are highlighted. With treeCheckable each row gets a checkbox instead. |
10 | popup.itemTitle | A row's label. |
11 | popup.itemSwitcher | The caret that opens and closes a node with children. |
© 2026 AntUIKit . All rights reserved.