TreeSelect

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

The most basic usage.

expand codeexpand code
import React, { useState } from 'react';
import { TreeSelect } from 'antd';

const { TreeNode } = TreeSelect;

const Demo = () => {
  const [value, setValue] = useState(undefined);
  const onChange = () => {
    setValue(value);
  };
  return (
    <TreeSelect
      showSearch
      style={{ width: '100%' }}
      value={value}
      dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
      placeholder="Please select"
      allowClear
      treeDefaultExpandAll
      onChange={onChange}
    >
      <TreeNode value="parent 1" title="parent 1">
        <TreeNode value="parent 1-0" title="parent 1-0">
          <TreeNode value="leaf1" title="leaf1" />
          <TreeNode value="leaf2" title="leaf2" />
        </TreeNode>
        <TreeNode value="parent 1-1" title="parent 1-1">
          <TreeNode value="leaf3" title={<b style={{ color: '#08c' }}>leaf3</b>} />
        </TreeNode>
      </TreeNode>
    </TreeSelect>
  );
};

ReactDOM.render(<Demo />, mountNode);
Please select

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

expand codeexpand code
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',
  },
];

class Demo extends React.Component {
  state = {
    value: undefined,
  };

  onChange = value => {
    console.log(value);
    this.setState({ value });
  };

  render() {
    return (
      <TreeSelect
        style={{ width: '100%' }}
        value={this.state.value}
        dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
        treeData={treeData}
        placeholder="Please select"
        treeDefaultExpandAll
        onChange={this.onChange}
      />
    );
  }
}

ReactDOM.render(<Demo />, mountNode);
Please select

Asynchronous loading tree node.

expand codeexpand code
import { TreeSelect } from 'antd';

class Demo extends React.Component {
  state = {
    value: undefined,
    treeData: [
      { 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 },
    ],
  };

  genTreeNode = (parentId, 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,
    };
  };

  onLoadData = ({ id }) =>
    new Promise(resolve => {
      setTimeout(() => {
        this.setState({
          treeData: this.state.treeData.concat([
            this.genTreeNode(id, false),
            this.genTreeNode(id, true),
            this.genTreeNode(id, true),
          ]),
        });
        resolve();
      }, 300);
    });

  onChange = value => {
    console.log(value);
    this.setState({ value });
  };

  render() {
    const { treeData } = this.state;
    return (
      <TreeSelect
        treeDataSimpleMode
        style={{ width: '100%' }}
        value={this.state.value}
        dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
        placeholder="Please select"
        onChange={this.onChange}
        loadData={this.onLoadData}
        treeData={treeData}
      />
    );
  }
}

ReactDOM.render(<Demo />, mountNode);

Multiple selection usage.

expand codeexpand code
import { TreeSelect } from 'antd';

const { TreeNode } = TreeSelect;

class Demo extends React.Component {
  state = {
    value: undefined,
  };

  onChange = value => {
    console.log(value);
    this.setState({ value });
  };

  render() {
    return (
      <TreeSelect
        showSearch
        style={{ width: '100%' }}
        value={this.state.value}
        dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
        placeholder="Please select"
        allowClear
        multiple
        treeDefaultExpandAll
        onChange={this.onChange}
      >
        <TreeNode value="parent 1" title="parent 1">
          <TreeNode value="parent 1-0" title="parent 1-0">
            <TreeNode value="leaf1" title="my leaf" />
            <TreeNode value="leaf2" title="your leaf" />
          </TreeNode>
          <TreeNode value="parent 1-1" title="parent 1-1">
            <TreeNode value="sss" title={<b style={{ color: '#08c' }}>sss</b>} />
          </TreeNode>
        </TreeNode>
      </TreeSelect>
    );
  }
}

ReactDOM.render(<Demo />, mountNode);

Multiple and checkable.

expand codeexpand code
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',
      },
    ],
  },
];

class Demo extends React.Component {
  state = {
    value: ['0-0-0'],
  };

  onChange = value => {
    console.log('onChange ', value);
    this.setState({ value });
  };

  render() {
    const tProps = {
      treeData,
      value: this.state.value,
      onChange: this.onChange,
      treeCheckable: true,
      showCheckedStrategy: SHOW_PARENT,
      placeholder: 'Please select',
      style: {
        width: '100%',
      },
    };
    return <TreeSelect {...tProps} />;
  }
}

ReactDOM.render(<Demo />, mountNode);

Use treeLine to show the line style.

expand codeexpand code
import { TreeSelect, Switch, Space } from 'antd';

const { TreeNode } = TreeSelect;

const Demo = () => {
  const [treeLine, setTreeLine] = React.useState(true);
  const [showLeafIcon, setShowLeafIcon] = React.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 }}>
        <TreeNode value="parent 1" title="parent 1">
          <TreeNode value="parent 1-0" title="parent 1-0">
            <TreeNode value="leaf1" title="my leaf" />
            <TreeNode value="leaf2" title="your leaf" />
          </TreeNode>
          <TreeNode value="parent 1-1" title="parent 1-1">
            <TreeNode value="sss" title="sss" />
          </TreeNode>
        </TreeNode>
      </TreeSelect>
    </Space>
  );
};

ReactDOM.render(<Demo />, mountNode);

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
dropdownClassNameThe className of dropdown menustring-
dropdownMatchSelectWidthDetermine 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 scrollboolean | numbertrue
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 asynchronouslyfunction(node)-
maxTagCountMax tag count to show. responsive will cost render performancenumber | responsive-responsive: 4.10
maxTagPlaceholderPlaceholder for not showing tagsReactNode | function(omittedValues)-
multipleSupport multiple or not, will be true when enable treeCheckablebooleanfalse
notFoundContentSpecify content to show when no result matchesReactNodeNot Found
placeholderPlaceholder of the select inputstring-
searchValueWork with onSearch to make search value controlledstring-
showArrowWhether to show the suffixIcon,when single selection mode, default trueboolean-
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-
suffixIconThe custom suffix icon,you must set showArrow to true manually in multiple selection modeReactNode-
switcherIconcustomize collapse | expand icon of tree nodeReactNode-
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[]-
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
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-

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/wk080nn81k

Why sometime customize Option cause scroll break?#

You can ref Select FAQ.