logoAnt Design

⌘ K
  • Design
  • Development
  • Components
  • Blog
  • Resources
5.5.1
  • Components Overview
  • General
    • Button
    • Icon
    • Typography
  • Layout
    • Divider
    • Grid
    • Layout
    • Space
  • Navigation
    • Anchor
    • Breadcrumb
    • Dropdown
    • Menu
    • Pagination
    • Steps
  • Data Entry
    • AutoComplete
    • Cascader
    • Checkbox
    • ColorPickerNew
    • 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
    • Segmented
    • Statistic
    • Table
    • Tabs
    • Tag
    • Timeline
    • Tooltip
    • Tour
    • Tree
  • Feedback
    • Alert
    • Drawer
    • Message
    • Modal
    • Notification
    • Popconfirm
    • Progress
    • Result
    • Skeleton
    • Spin
  • Other
    • Affix
    • App
    • ConfigProvider
    • FloatButton
    • Watermark
When To Use
Examples
Basic
Multiple Selection
Generate from tree data
Checkable
Asynchronous loading
Show Tree Line
Placement
Status
API
Tree props
Tree Methods
TreeNode props
Design Token
FAQ
How to get parent node in onChange?
Why sometime customize Option cause scroll break?
Why loadData not trigger when searching?

TreeSelect

TransferUpload

Resources

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

Community

Awesome Ant Design
Medium
Twitter
yuqueAnt Design in YuQue
Ant Design in Zhihu
Experience Cloud Blog
seeconfSEE Conf-Experience Tech Conference

Help

GitHub
Change Log
FAQ
Bug Report
Issues
Discussions
StackOverflow
SegmentFault

Ant XTechMore Products

yuqueYuQue-Document Collaboration Platform
AntVAntV-Data Visualization
EggEgg-Enterprise Node.js Framework
kitchenKitchen-Sketch Toolkit
xtechAnt Financial Experience Tech
Theme Editor
Made with ❤ by
Ant Group and Ant Design Community

Tree selection control.

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

Basic

The most basic usage.

expand codeexpand code
TypeScript
JavaScript
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;
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.

expand codeexpand code
TypeScript
JavaScript
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

Asynchronous loading tree node.

expand codeexpand code
TypeScript
JavaScript
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;
Placement

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

expand codeexpand code
TypeScript
JavaScript
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

Multiple selection usage.

expand codeexpand code
TypeScript
JavaScript
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;
Checkable

Multiple and checkable.

expand codeexpand code
TypeScript
JavaScript
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;
Show Tree Line

Use treeLine to show the line style.

expand codeexpand code
TypeScript
JavaScript
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;
Status

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

expand codeexpand code
TypeScript
JavaScript
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;

API

Tree props

PropertyDescriptionTypeDefaultVersion
allowClearWhether allow clearbooleanfalse
autoClearSearchValueIf auto clear search input value when multiple select is selected/deselectedbooleantrue
borderedWhether has border stylebooleantrue
defaultValueTo set the initial selected treeNode(s)string | string[]-
disabledDisabled or notbooleanfalse
popupClassNameThe className of dropdown menustring-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(originNode: ReactNode, props) => ReactNode-
dropdownStyleTo set the style of the dropdown menuCSSProperties-
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
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
placeholderPlaceholder of the select inputstring-
placementThe position where the selection box pops upbottomLeft bottomRight topLeft topRightbottomLeft
searchValueWork with onSearch to make search value controlledstring-
showArrowWhether to show the suffixIconbooleantrue
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 icon,you must set showArrow to true manually in multiple selection modeReactNode-
switcherIconCustomize collapse/expand icon of tree nodeReactNode | ((props: AntTreeNodeProps) => ReactNode)-renderProps: 4.20.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
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[]-
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 openfunction(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)-

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-

Design Token

Global Token

Token NameDescriptionTypeDefault Value
colorBgContainerContainer background color, e.g: default button, input box, etc. Be sure not to confuse this with `colorBgElevated`.string#ffffff
colorBgContainerDisabledControl the background color of container in disabled state.stringrgba(0, 0, 0, 0.04)
colorBgElevatedContainer background color of the popup layer, in dark mode the color value of this token will be a little brighter than `colorBgContainer`. E.g: modal, pop-up, menu, etc.string#ffffff
colorBorderDefault border color, used to separate different elements, such as: form separator, card separator, etc.string#d9d9d9
colorPrimaryBrand color is one of the most direct visual elements to reflect the characteristics and communication of the product. After you have selected the brand color, we will automatically generate a complete color palette and assign it effective design semantics.string#1677ff
colorPrimaryBorderThe stroke color under the main color gradient, used on the stroke of components such as Slider.string#91caff
colorPrimaryHoverHover state under the main color gradient.string#4096ff
colorTextDefault text color which comply with W3C standards, and this color is also the darkest neutral color.stringrgba(0, 0, 0, 0.88)
colorTextDisabledControl the color of text in disabled state.stringrgba(0, 0, 0, 0.25)
colorTextLightSolidControl the highlight color of text with background color, such as the text in Primary Button components.string#fff
colorWhitePure white color don't changed by themestring#fff
borderRadiusBorder radius of base componentsnumber6
borderRadiusSMSM size border radius, used in small size components, such as Button, Input, Select and other input components in small sizenumber4
controlHeightSMSM component heightnumber24
controlInteractiveSizeControl the interactive size of control component.number16
controlItemBgActiveControl the background color of control component item when active.string#e6f4ff
controlItemBgHoverControl the background color of control component item when hovering.stringrgba(0, 0, 0, 0.04)
fontFamilyThe font family of Ant Design prioritizes the default interface font of the system, and provides a set of alternative font libraries that are suitable for screen display to maintain the readability and readability of the font under different platforms and browsers, reflecting the friendly, stable and professional characteristics.string-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'
fontSizeThe most widely used font size in the design system, from which the text gradient will be derived.number14
fontSizeLGLarge font sizenumber16
lineHeightLine height of text.number1.5714285714285714
lineTypeBorder style of base componentsstringsolid
lineWidthBorder width of base componentsnumber1
lineWidthBoldThe default line width of the outline class components, such as Button, Input, Select, etc.number2
lineWidthFocusControl the width of the line when the component is in focus state.number4
marginXSControl the margin of an element, with a small size.number8
motionDurationFastMotion speed, fast speed. Used for small element animation interaction.string0.1s
motionDurationMidMotion speed, medium speed. Used for medium element animation interaction.string0.2s
motionDurationSlowMotion speed, slow speed. Used for large element animation interaction.string0.3s
motionEaseInBackPreset motion curve.stringcubic-bezier(0.71, -0.46, 0.88, 0.6)
motionEaseOutBackPreset motion curve.stringcubic-bezier(0.12, 0.4, 0.29, 1.46)
paddingXSControl the extra small padding of the element.number8

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:

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


Please select
 
Please select
Node1
 
Error
 
Warning multiple