Basic
Multiple Selection
Generate from tree data
Checkable
Asynchronous loading
Show Tree Line
Placement
Status
API

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

Please select

Basic

The most basic usage.

TypeScript
JavaScript
import { TreeSelect } from 'infrad';
import React, { useState } from 'react';

const { TreeNode } = TreeSelect;

const App: React.FC = () => {
  const [value, setValue] = useState<string | undefined>(undefined);

  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}
    >
      <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>
  );
};

export default App;

Please select

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.

TypeScript
JavaScript
import { TreeSelect } from 'infrad';
import React, { useState } from 'react';

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;

Please select

Asynchronous loading

Asynchronous loading tree node.

TypeScript
JavaScript
import type { TreeSelectProps } from 'infrad';
import { TreeSelect } from 'infrad';
import type { DefaultOptionType } from 'infrad/es/select';
import React, { useState } from 'react';

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;

topLefttopRightbottomLeftbottomRight

Please select

Placement

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

TypeScript
JavaScript
import type { RadioChangeEvent } from 'infrad';
import { Radio, TreeSelect } from 'infrad';
import type { SelectCommonPlacement } from 'infrad/es/_util/motion';
import React, { useState } from 'react';

const { TreeNode } = TreeSelect;

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
      >
        <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>
    </>
  );
};

export default App;

Please select

Multiple Selection

Multiple selection usage.

TypeScript
JavaScript
import { TreeSelect } from 'infrad';
import React, { useState } from 'react';

const { TreeNode } = TreeSelect;

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}
    >
      <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>
  );
};

export default App;

Node1

Checkable

Multiple and checkable.

TypeScript
JavaScript
import { TreeSelect } from 'infrad';
import React, { useState } from 'react';

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.

TypeScript
JavaScript
import { Space, Switch, TreeSelect } from 'infrad';
import React, { useState } from 'react';

const { TreeNode } = TreeSelect;

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 }}>
        <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>
  );
};

export default App;

Error

Warning multiple

Status

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

TypeScript
JavaScript
import { Space, TreeSelect } from 'infrad';
import React from 'react';

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;

4.19.0

API#

Tree props#

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
dropdownClassName	The className of dropdown menu	string	-
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)	-
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	-
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)	-

Tree Methods#

Name	Description	Version
blur()	Remove focus
focus()	Get focus

TreeNode props#

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

Property	Description	Type	Default
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	-

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.