Tree selection control.
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.
The most basic usage.
import React, { useState } from 'react';
import { TreeSelect } from 'antd';
const treeData = [
{
value: 'parent 1',
title: 'parent 1',
children: [
{
value: 'parent 1-0',
title: 'parent 1-0',
children: [
{
value: 'leaf1',
title: 'leaf1',
},
{
value: 'leaf2',
title: 'leaf2',
},
],
},
{
value: 'parent 1-1',
title: 'parent 1-1',
children: [
{
value: 'leaf3',
title: <b style={{ color: '#08c' }}>leaf3</b>,
},
],
},
],
},
];
const App: React.FC = () => {
const [value, setValue] = useState<string>();
const onChange = (newValue: string) => {
setValue(newValue);
};
return (
<TreeSelect
showSearch
style={{ width: '100%' }}
value={value}
dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
placeholder="Please select"
allowClear
treeDefaultExpandAll
onChange={onChange}
treeData={treeData}
/>
);
};
export default App;
The tree structure can be populated using treeData property. This is a quick and easy way to provide the tree content.
import React, { useState } from 'react';
import { TreeSelect } from 'antd';
const treeData = [
{
title: 'Node1',
value: '0-0',
children: [
{
title: 'Child Node1',
value: '0-0-1',
},
{
title: 'Child Node2',
value: '0-0-2',
},
],
},
{
title: 'Node2',
value: '0-1',
},
];
const App: React.FC = () => {
const [value, setValue] = useState<string>();
const onChange = (newValue: string) => {
console.log(newValue);
setValue(newValue);
};
return (
<TreeSelect
style={{ width: '100%' }}
value={value}
dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
treeData={treeData}
placeholder="Please select"
treeDefaultExpandAll
onChange={onChange}
/>
);
};
export default App;
Asynchronous loading tree node.
import React, { useState } from 'react';
import type { TreeSelectProps } from 'antd';
import { TreeSelect } from 'antd';
import type { DefaultOptionType } from 'antd/es/select';
const App: React.FC = () => {
const [value, setValue] = useState<string>();
const [treeData, setTreeData] = useState<Omit<DefaultOptionType, 'label'>[]>([
{ id: 1, pId: 0, value: '1', title: 'Expand to load' },
{ id: 2, pId: 0, value: '2', title: 'Expand to load' },
{ id: 3, pId: 0, value: '3', title: 'Tree Node', isLeaf: true },
]);
const genTreeNode = (parentId: number, isLeaf = false) => {
const random = Math.random().toString(36).substring(2, 6);
return {
id: random,
pId: parentId,
value: random,
title: isLeaf ? 'Tree Node' : 'Expand to load',
isLeaf,
};
};
const onLoadData: TreeSelectProps['loadData'] = ({ id }) =>
new Promise((resolve) => {
setTimeout(() => {
setTreeData(
treeData.concat([genTreeNode(id, false), genTreeNode(id, true), genTreeNode(id, true)]),
);
resolve(undefined);
}, 300);
});
const onChange = (newValue: string) => {
console.log(newValue);
setValue(newValue);
};
return (
<TreeSelect
treeDataSimpleMode
style={{ width: '100%' }}
value={value}
dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
placeholder="Please select"
onChange={onChange}
loadData={onLoadData}
treeData={treeData}
/>
);
};
export default App;
You can manually specify the position of the popup via placement.
import React, { useState } from 'react';
import type { RadioChangeEvent } from 'antd';
import { Radio, TreeSelect } from 'antd';
import type { SelectCommonPlacement } from 'antd/es/_util/motion';
const treeData = [
{
value: 'parent 1',
title: 'parent 1',
children: [
{
value: 'parent 1-0',
title: 'parent 1-0',
children: [
{
value: 'leaf1',
title: 'leaf1',
},
{
value: 'leaf2',
title: 'leaf2',
},
],
},
{
value: 'parent 1-1',
title: 'parent 1-1',
children: [
{
value: 'leaf3',
title: <b style={{ color: '#08c' }}>leaf3</b>,
},
],
},
],
},
];
const App: React.FC = () => {
const [placement, SetPlacement] = useState<SelectCommonPlacement>('topLeft');
const placementChange = (e: RadioChangeEvent) => {
SetPlacement(e.target.value);
};
return (
<>
<Radio.Group value={placement} onChange={placementChange}>
<Radio.Button value="topLeft">topLeft</Radio.Button>
<Radio.Button value="topRight">topRight</Radio.Button>
<Radio.Button value="bottomLeft">bottomLeft</Radio.Button>
<Radio.Button value="bottomRight">bottomRight</Radio.Button>
</Radio.Group>
<br />
<br />
<TreeSelect
showSearch
dropdownStyle={{ maxHeight: 400, overflow: 'auto', minWidth: 300 }}
placeholder="Please select"
dropdownMatchSelectWidth={false}
placement={placement}
allowClear
treeDefaultExpandAll
treeData={treeData}
/>
</>
);
};
export default App;
Multiple selection usage.
import React, { useState } from 'react';
import { TreeSelect } from 'antd';
const treeData = [
{
value: 'parent 1',
title: 'parent 1',
children: [
{
value: 'parent 1-0',
title: 'parent 1-0',
children: [
{
value: 'leaf1',
title: 'my leaf',
},
{
value: 'leaf2',
title: 'your leaf',
},
],
},
{
value: 'parent 1-1',
title: 'parent 1-1',
children: [
{
value: 'sss',
title: <b style={{ color: '#08c' }}>sss</b>,
},
],
},
],
},
];
const App: React.FC = () => {
const [value, setValue] = useState<string>();
const onChange = (newValue: string) => {
console.log(newValue);
setValue(newValue);
};
return (
<TreeSelect
showSearch
style={{ width: '100%' }}
value={value}
dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
placeholder="Please select"
allowClear
multiple
treeDefaultExpandAll
onChange={onChange}
treeData={treeData}
/>
);
};
export default App;
Multiple and checkable.
import React, { useState } from 'react';
import { TreeSelect } from 'antd';
const { SHOW_PARENT } = TreeSelect;
const treeData = [
{
title: 'Node1',
value: '0-0',
key: '0-0',
children: [
{
title: 'Child Node1',
value: '0-0-0',
key: '0-0-0',
},
],
},
{
title: 'Node2',
value: '0-1',
key: '0-1',
children: [
{
title: 'Child Node3',
value: '0-1-0',
key: '0-1-0',
},
{
title: 'Child Node4',
value: '0-1-1',
key: '0-1-1',
},
{
title: 'Child Node5',
value: '0-1-2',
key: '0-1-2',
},
],
},
];
const App: React.FC = () => {
const [value, setValue] = useState(['0-0-0']);
const onChange = (newValue: string[]) => {
console.log('onChange ', value);
setValue(newValue);
};
const tProps = {
treeData,
value,
onChange,
treeCheckable: true,
showCheckedStrategy: SHOW_PARENT,
placeholder: 'Please select',
style: {
width: '100%',
},
};
return <TreeSelect {...tProps} />;
};
export default App;
Use treeLine to show the line style.
import React, { useState } from 'react';
import { Space, Switch, TreeSelect } from 'antd';
const treeData = [
{
value: 'parent 1',
title: 'parent 1',
children: [
{
value: 'parent 1-0',
title: 'parent 1-0',
children: [
{
value: 'leaf1',
title: 'leaf1',
},
{
value: 'leaf2',
title: 'leaf2',
},
],
},
{
value: 'parent 1-1',
title: 'parent 1-1',
children: [
{
value: 'sss',
title: 'sss',
},
],
},
],
},
];
const App: React.FC = () => {
const [treeLine, setTreeLine] = useState(true);
const [showLeafIcon, setShowLeafIcon] = useState(false);
return (
<Space direction="vertical">
<Switch
checkedChildren="treeLine"
unCheckedChildren="treeLine"
checked={treeLine}
onChange={() => setTreeLine(!treeLine)}
/>
<Switch
disabled={!treeLine}
checkedChildren="showLeafIcon"
unCheckedChildren="showLeafIcon"
checked={showLeafIcon}
onChange={() => setShowLeafIcon(!showLeafIcon)}
/>
<TreeSelect
treeLine={treeLine && { showLeafIcon }}
style={{ width: 300 }}
treeData={treeData}
/>
</Space>
);
};
export default App;
Add status to TreeSelect with status, which could be error or warning.
import React from 'react';
import { Space, TreeSelect } from 'antd';
const App: React.FC = () => (
<Space direction="vertical" style={{ width: '100%' }}>
<TreeSelect status="error" style={{ width: '100%' }} placeholder="Error" />
<TreeSelect
status="warning"
style={{ width: '100%' }}
multiple
placeholder="Warning multiple"
/>
</Space>
);
export default App;
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| allowClear | Whether allow clear | boolean | false | |
| autoClearSearchValue | If auto clear search input value when multiple select is selected/deselected | boolean | true | |
| bordered | Whether has border style | boolean | true | |
| defaultValue | To set the initial selected treeNode(s) | string | string[] | - | |
| disabled | Disabled or not | boolean | false | |
| popupClassName | The className of dropdown menu | string | - | 4.23.0 |
| dropdownMatchSelectWidth | Determine whether the dropdown 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 scroll | boolean | number | true | |
| dropdownRender | Customize dropdown content | (originNode: ReactNode, props) => ReactNode | - | |
| dropdownStyle | To set the style of the dropdown menu | CSSProperties | - | |
| fieldNames | Customize node label, value, children field name | object | { label: label, value: value, children: children } | 4.17.0 |
| filterTreeNode | Whether to filter treeNodes by input value. The value of treeNodeFilterProp is used for filtering by default | boolean | function(inputValue: string, treeNode: TreeNode) (should return boolean) | function | |
| getPopupContainer | To 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. example | function(triggerNode) | () => document.body | |
| labelInValue | Whether to embed label in value, turn the format of value from string to {value: string, label: ReactNode, halfChecked: string[]} | boolean | false | |
| listHeight | Config popup height | number | 256 | |
| loadData | Load data asynchronously | function(node) | - | |
| maxTagCount | Max tag count to show. responsive will cost render performance | number | responsive | - | responsive: 4.10 |
| maxTagPlaceholder | Placeholder for not showing tags | ReactNode | function(omittedValues) | - | |
| maxTagTextLength | Max tag text length to show | number | - | |
| multiple | Support multiple or not, will be true when enable treeCheckable | boolean | false | |
| notFoundContent | Specify content to show when no result matches | ReactNode | Not Found | |
| placeholder | Placeholder of the select input | string | - | |
| placement | The position where the selection box pops up | bottomLeft bottomRight topLeft topRight | bottomLeft | |
| searchValue | Work with onSearch to make search value controlled | string | - | |
| showArrow | Whether to show the suffixIcon，when single selection mode, default true | boolean | - | |
| showCheckedStrategy | The 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_CHILD | TreeSelect.SHOW_CHILD | |
| showSearch | Support search or not | boolean | single: false | multiple: true | |
| size | To set the size of the select input | large | middle | small | - | |
| status | Set validation status | 'error' | 'warning' | - | 4.19.0 |
| suffixIcon | The custom suffix icon,you must set showArrow to true manually in multiple selection mode | ReactNode | - | |
| switcherIcon | Customize collapse/expand icon of tree node | ReactNode | ((props: AntTreeNodeProps) => ReactNode) | - | renderProps: 4.20.0 |
| tagRender | Customize tag render when multiple | (props) => ReactNode | - | |
| treeCheckable | Whether to show checkbox on the treeNodes | boolean | false | |
| treeCheckStrictly | Whether to check nodes precisely (in the checkable mode), means parent and child nodes are not associated, and it will make labelInValue be true | boolean | false | |
| treeData | Data 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] }> | [] | |
| treeDataSimpleMode | Enable 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 treeDataSimpleMode | boolean | object<{ id: string, pId: string, rootPId: string }> | false | |
| treeDefaultExpandAll | Whether to expand all treeNodes by default | boolean | false | |
| treeDefaultExpandedKeys | Default expanded treeNodes | string[] | - | |
| treeExpandAction | Tree title open logic when click, optional: false | click | doubleClick | string | boolean | false | 4.21.0 |
| treeExpandedKeys | Set expanded keys | string[] | - | |
| treeIcon | Shows the icon before a TreeNode's title. There is no default style; you must set a custom style for it if set to true | boolean | false | |
| treeLoadedKeys | (Controlled) Set loaded tree nodes, work with loadData only | string[] | [] | |
| treeLine | Show the line. Ref Tree - showLine | boolean | object | false | 4.17.0 |
| treeNodeFilterProp | Will be used for filtering if filterTreeNode returns true | string | value | |
| treeNodeLabelProp | Will render as content of select | string | title | |
| value | To set the current selected treeNode(s) | string | string[] | - | |
| virtual | Disable virtual scroll when set to false | boolean | true | 4.1.0 |
| onChange | A callback function, can be executed when selected treeNodes or input value change | function(value, label, extra) | - | |
| onDropdownVisibleChange | Called when dropdown open | function(open) | - | |
| onSearch | A callback function, can be executed when the search input changes | function(value: string) | - | |
| onSelect | A callback function, can be executed when you select a treeNode | function(value, node, extra) | - | |
| onTreeExpand | A callback function, can be executed when treeNode expanded | function(expandedKeys) | - |
| Name | Description | Version |
|---|---|---|
| blur() | Remove focus | |
| focus() | Get focus |
We recommend you to use
treeDatarather thanTreeNode, to avoid the trouble of manual construction.
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| checkable | When Tree is checkable, set TreeNode display Checkbox or not | boolean | - | |
| disableCheckbox | Disables the checkbox of the treeNode | boolean | false | |
| disabled | Disabled or not | boolean | false | |
| isLeaf | Leaf node or not | boolean | false | |
| key | Required property (unless using treeDataSimpleMode), should be unique in the tree | string | - | |
| selectable | Whether can be selected | boolean | true | |
| title | Content showed on the treeNodes | ReactNode | --- | |
| value | Will be treated as treeNodeFilterProp by default, should be unique in the tree | string | - |
We don't provide this since performance consideration. You can get by this way: https://codesandbox.io/s/wk080nn81k
You can ref Select FAQ.