logoAnt Design

⌘ K
  • Design
  • Development
  • Components
  • Blog
  • Resources
5.25.0
  • Components Overview
  • General
    • Button
    • FloatButton
      5.0.0
    • Icon
    • Typography
  • Layout
    • Divider
    • Flex
      5.10.0
    • Grid
    • Layout
    • Space
    • Splitter
      5.21.0
  • Navigation
    • Anchor
    • Breadcrumb
    • Dropdown
    • Menu
    • Pagination
    • Steps
    • Tabs
  • Data Entry
    • AutoComplete
    • Cascader
    • Checkbox
    • ColorPicker
      5.5.0
    • DatePicker
    • Form
    • Input
    • InputNumber
    • Mentions
    • Radio
    • Rate
    • Select
    • Slider
    • Switch
    • TimePicker
    • Transfer
    • TreeSelect
    • Upload
  • Data Display
    • Avatar
    • Badge
    • Calendar
    • Card
    • Carousel
    • Collapse
    • Descriptions
    • Empty
    • Image
    • List
    • Popover
    • QRCode
      5.1.0
    • Segmented
    • Statistic
    • Table
    • Tag
    • Timeline
    • Tooltip
    • Tour
      5.0.0
    • Tree
  • Feedback
    • Alert
    • Drawer
    • Message
    • Modal
    • Notification
    • Popconfirm
    • Progress
    • Result
    • Skeleton
    • Spin
    • Watermark
      5.1.0
  • Other
    • Affix
    • App
      5.1.0
    • ConfigProvider
    • Util
      5.13.0

TreeSelect

Tree selection control.
Importimport { TreeSelect } from "antd";
Sourcecomponents/tree-select
Docs
Edit this pageChangelog

Resources

Ant Design X
Ant Design Charts
Ant Design Pro
Pro Components
Ant Design Mobile
Ant Design Mini
Ant Design Web3
Ant Design Landing-Landing Templates
Scaffolds-Scaffold Market
Umi-React Application Framework
dumi-Component doc generator
qiankun-Micro-Frontends Framework
Ant Motion-Motion Solution
China Mirror 🇨🇳

Community

Awesome Ant Design
Medium
Twitter
yuque logoAnt Design in YuQue
Ant Design in Zhihu
Experience Cloud Blog
seeconf logoSEE Conf-Experience Tech Conference

Help

GitHub
Change Log
FAQ
Bug Report
Issues
Discussions
StackOverflow
SegmentFault

Ant XTech logoMore Products

yuque logoYuQue-Document Collaboration Platform
AntV logoAntV-Data Visualization
Egg logoEgg-Enterprise Node.js Framework
Kitchen logoKitchen-Sketch Toolkit
Galacean logoGalacean-Interactive Graphics Solution
xtech logoAnt Financial Experience Tech
Theme Editor
Made with ❤ by
Ant Group and Ant Design Community
loading

When To Use

TreeSelect is similar to Select, but the values are provided in a tree like structure. Any data whose entries are defined in a hierarchical manner is fit to use this control. Examples of such case may include a corporate hierarchy, a directory structure, and so on.

Examples

API

Common props ref:Common props

Tree props

PropertyDescriptionTypeDefaultVersion
allowClearCustomize clear iconboolean | { clearIcon?: ReactNode }false5.8.0: Support object type
autoClearSearchValueIf auto clear search input value when multiple select is selected/deselectedbooleantrue
classNamesSemantic DOM classRecord<SemanticDOM, string>-5.25.0
defaultOpenInitial open state of dropdownboolean-
defaultValueTo set the initial selected treeNode(s)string | string[]-
disabledDisabled or notbooleanfalse
popupClassNameThe className of dropdown menu, use classNames.popup.root insteadstring-4.23.0
popupMatchSelectWidthDetermine whether the popup menu and the select input are the same width. Default set min-width same as input. Will ignore when value less than select width. false will disable virtual scrollboolean | numbertrue5.5.0
dropdownRenderCustomize dropdown content, use popupRender instead(originNode: ReactNode, props) => ReactNode-
popupRenderCustomize dropdown content(originNode: ReactNode, props) => ReactNode-
dropdownStyleTo set the style of the dropdown menu, use styles.popup.root insteadCSSProperties-
fieldNamesCustomize node label, value, children field nameobject{ label: label, value: value, children: children }4.17.0
filterTreeNodeWhether to filter treeNodes by input value. The value of treeNodeFilterProp is used for filtering by defaultboolean | function(inputValue: string, treeNode: TreeNode) (should return boolean)function
getPopupContainerTo set the container of the dropdown menu. The default is to create a div element in body, you can reset it to the scrolling area and make a relative reposition. examplefunction(triggerNode)() => document.body
labelInValueWhether to embed label in value, turn the format of value from string to {value: string, label: ReactNode, halfChecked: string[]}booleanfalse
listHeightConfig popup heightnumber256
loadDataLoad data asynchronously. Will not load when filtering. Check FAQ for more infofunction(node)-
maxTagCountMax tag count to show. responsive will cost render performancenumber | responsive-responsive: 4.10
maxCountThe maximum number of items that can be selected. Only takes effect when multiple=true. If (showCheckedStrategy = 'SHOW_ALL' and treeCheckStrictly is disabled) or showCheckedStrategy = 'SHOW_PARENT' is used, maxCount will not take effect.number-5.23.0
maxTagPlaceholderPlaceholder for not showing tagsReactNode | function(omittedValues)-
maxTagTextLengthMax tag text length to shownumber-
multipleSupport multiple or not, will be true when enable treeCheckablebooleanfalse
notFoundContentSpecify content to show when no result matchesReactNodeNot Found
openControlled open state of dropdownboolean-
placeholderPlaceholder of the select inputstring-
placementThe position where the selection box pops upbottomLeft bottomRight topLeft topRightbottomLeft
prefixThe custom prefixReactNode-5.22.0
searchValueWork with onSearch to make search value controlledstring-
showCheckedStrategyThe way show selected item in box when treeCheckable set. Default: just show child nodes. TreeSelect.SHOW_ALL: show all checked treeNodes (include parent treeNode). TreeSelect.SHOW_PARENT: show checked treeNodes (just show parent treeNode)TreeSelect.SHOW_ALL | TreeSelect.SHOW_PARENT | TreeSelect.SHOW_CHILDTreeSelect.SHOW_CHILD
showSearchSupport search or notbooleansingle: false | multiple: true
sizeTo set the size of the select inputlarge | middle | small-
statusSet validation status'error' | 'warning'-4.19.0
suffixIconThe custom suffix iconReactNode<DownOutlined />
switcherIconCustomize collapse/expand icon of tree nodeReactNode | ((props: AntTreeNodeProps) => ReactNode)-renderProps: 4.20.0
stylesSemantic DOM styleRecord<SemanticDOM, CSSProperties>-5.25.0
tagRenderCustomize tag render when multiple(props) => ReactNode-
treeCheckableWhether to show checkbox on the treeNodesbooleanfalse
treeCheckStrictlyWhether to check nodes precisely (in the checkable mode), means parent and child nodes are not associated, and it will make labelInValue be truebooleanfalse
treeDataData of the treeNodes, manual construction work is no longer needed if this property has been set(ensure the Uniqueness of each value)array<{ value, title, children, [disabled, disableCheckbox, selectable, checkable] }>[]
treeDataSimpleModeEnable simple mode of treeData. Changes the treeData schema to: [{id:1, pId:0, value:'1', title:"test1",...},...] where pId is parent node's id). It is possible to replace the default id and pId keys by providing object to treeDataSimpleModeboolean | object<{ id: string, pId: string, rootPId: string }>false
treeTitleRenderCustomize tree node title render(nodeData) => ReactNode-5.12.0
treeDefaultExpandAllWhether to expand all treeNodes by defaultbooleanfalse
treeDefaultExpandedKeysDefault expanded treeNodesstring[]-
treeExpandActionTree title open logic when click, optional: false | click | doubleClickstring | booleanfalse4.21.0
treeExpandedKeysSet expanded keysstring[]-
treeIconShows the icon before a TreeNode's title. There is no default style; you must set a custom style for it if set to truebooleanfalse
treeLoadedKeys(Controlled) Set loaded tree nodes, work with loadData onlystring[][]
treeLineShow the line. Ref Tree - showLineboolean | objectfalse4.17.0
treeNodeFilterPropWill be used for filtering if filterTreeNode returns truestringvalue
treeNodeLabelPropWill render as content of selectstringtitle
valueTo set the current selected treeNode(s)string | string[]-
variantVariants of selectoroutlined | borderless | filled | underlinedoutlined5.13.0 | underlined: 5.24.0
virtualDisable virtual scroll when set to falsebooleantrue4.1.0
onChangeA callback function, can be executed when selected treeNodes or input value changefunction(value, label, extra)-
onDropdownVisibleChangeCalled when dropdown open, use onOpenChange insteadfunction(open)-
onSearchA callback function, can be executed when the search input changesfunction(value: string)-
onSelectA callback function, can be executed when you select a treeNodefunction(value, node, extra)-
onTreeExpandA callback function, can be executed when treeNode expandedfunction(expandedKeys)-
onPopupScrollCalled when dropdown scrolls(event: UIEvent) => void-5.17.0

Tree Methods

NameDescriptionVersion
blur()Remove focus
focus()Get focus

TreeNode props

We recommend you to use treeData rather than TreeNode, to avoid the trouble of manual construction.

PropertyDescriptionTypeDefaultVersion
checkableWhen Tree is checkable, set TreeNode display Checkbox or notboolean-
disableCheckboxDisables the checkbox of the treeNodebooleanfalse
disabledDisabled or notbooleanfalse
isLeafLeaf node or notbooleanfalse
keyRequired property (unless using treeDataSimpleMode), should be unique in the treestring-
selectableWhether can be selectedbooleantrue
titleContent showed on the treeNodesReactNode---
valueWill be treated as treeNodeFilterProp by default, should be unique in the treestring-

Semantic DOM

Design Token

Component TokenHow to use?
Token NameDescriptionTypeDefault Value
indentSizeIndent width of treenumber24
nodeHoverBgBackground color of hovered nodestringrgba(0,0,0,0.04)
nodeHoverColorText color of hovered nodestringrgba(0,0,0,0.88)
nodeSelectedBgBackground color of selected nodestring#e6f4ff
nodeSelectedColorText color of selected nodestringrgba(0,0,0,0.88)
titleHeightNode title heightnumber24
Global TokenHow to use?

FAQ

How to get parent node in onChange?

We don't provide this since performance consideration. You can get by this way: https://codesandbox.io/s/get-parent-node-in-onchange-eb1608

Why sometime customize Option cause scroll break?

You can ref Select FAQ.

Why loadData not trigger when searching?

In earlier version, loadData will be triggered when searching. But we got feedback that it will block network when inputting. So we change it to not trigger loadData when searching. But you can still handle async logic by filterTreeNode:

tsx
<TreeSelect
filterTreeNode={(input, treeNode) => {
const match = YOUR_LOGIC_HERE;
if (match && !treeNode.isLeaf && !treeNode.children) {
// Do some loading logic
}
return match;
}}
/>

Why can't popup scroll horizontally?

Just turn off virtual scrolling, because the scrollWidth of the complete list cannot be accurately measured when virtual scrolling is turned on.

Basic

The most basic usage.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Generate from tree data

The tree structure can be populated using treeData property. This is a quick and easy way to provide the tree content.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Asynchronous loading

Asynchronous loading tree node.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Placement

You can manually specify the position of the popup via placement.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Status

Add status to TreeSelect with status, which could be error or warning.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Prefix and Suffix

Custom prefix and suffixIcon.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
5.22.0
Multiple Selection

Multiple selection usage.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Checkable

Multiple and checkable.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Show Tree Line

Use treeLine to show the line style.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Variants

Variants of TreeSelect, there are four variants: outlined filled borderless and underlined.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
5.13.0
Max Count

You can set the maxCount prop to control the max number of items can be selected. When the limit is exceeded, the options will become disabled.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
5.23.0
Please select
Please select
Please select


Please select
Error
 
Warning multiple
Please select


Prefix
Please select
 
Please select
Node1
 
Please select
Please select
Please select
Please select
Child 1-1
 
1 / 3
Please select
  • root
    5.25.0
    Root element
  • popup.root
    5.25.0
    Popup element