TreeSelect

When to Use

When the options to select is in tree structure, you could use TreeSelect, e.g. department hierarchy, subject system, category directory and etc.

Demos

How to import

import { TreeSelect } from '@fibrous/semi-ui-react';

Basic Usage

By default, TreeSelect is in single select mode and each item is selectable.

Code

import { TreeSelect } from '@fibrous/semi-ui-react';
export default function TreeSelectDemo() {
    const treeData = [
        {
            label: '亚洲',
            value: 'Asia',
            key: '0',
            children: [
                {
                    label: '中国',
                    value: 'China',
                    key: '0-0',
                    children: [
                        {
                            label: '北京',
                            value: 'Beijing',
                            key: '0-0-0',
                        },
                        {
                            label: '上海',
                            value: 'Shanghai',
                            key: '0-0-1',
                        },
                    ],
                },
            ],
        },
        {
            label: '北美洲',
            value: 'North America',
            key: '1',
        },
    ];
    return <TreeSelect style={{ width: 300 }} dropdownStyle={{ maxHeight: 400, overflow: 'auto' }} treeData={treeData} placeholder="请选择" />;
}

Multi-choice

You could use multiple to set mode to multi-choice. When all child items are selected, the parent item will be selected.

Use leafOnly if you prefer to render leaf nodes only and the corresponding params for onChange will also be leaf nodes values.

Code

import { TreeSelect } from '@fibrous/semi-ui-react';
export default function TreeSelectDemo() {
    const treeData = [
        {
            label: 'Asia',
            value: 'Asia',
            key: '0',
            children: [
                {
                    label: 'China',
                    value: 'China',
                    key: '0-0',
                    children: [
                        {
                            label: 'Beijing',
                            value: 'Beijing',
                            key: '0-0-0',
                        },
                        {
                            label: 'Shanghai',
                            value: 'Shanghai',
                            key: '0-0-1',
                        },
                        {
                            label: 'Chengdu',
                            value: 'Chengdu',
                            key: '0-0-2',
                        },
                    ],
                },
                {
                    label: 'Japan',
                    value: 'Japan',
                    key: '0-1',
                    children: [
                        {
                            label: 'Osaka',
                            value: 'Osaka',
                            key: '0-1-0',
                        },
                    ],
                },
            ],
        },
        {
            label: 'North America',
            value: 'North America',
            key: '1',
            children: [
                {
                    label: 'United States',
                    value: 'United States',
                    key: '1-0',
                },
                {
                    label: 'Canada',
                    value: 'Canada',
                    key: '1-1',
                },
            ],
        },
    ];
    return (
        <div>
            <TreeSelect style={{ width: 300 }} multiple dropdownStyle={{ maxHeight: 400, overflow: 'auto' }} treeData={treeData} placeholder="请选择" />
            <br />
            <br />
            <TreeSelect style={{ width: 300 }} dropdownStyle={{ maxHeight: 400, overflow: 'auto' }} treeData={treeData} multiple leafOnly placeholder="只渲染叶子节点" />
            <br />
            <br />
        </div>
    );
}

Limit Tags Number

In the multi-selection scenario, maxTagCount can be used to limit the number of tags displayed, and the excess part will be displayed in the form of +N.
Use showRestTagsPopover (>= v2.22.0) to set whether hover +N displays Popover after exceeding maxTagCount, the default is false. Also, popovers can be configured in the restTagsPopoverProps property.

maxTagCount=2:

maxTagCount=2, showRestTagsPopover:

Code

import { TreeSelect } from '@fibrous/semi-ui-react';
export default function TreeSelectDemo() {
    const treeData = [
        {
            label: 'Asia',
            value: 'Asia',
            key: '0',
            children: [
                {
                    label: 'China',
                    value: 'China',
                    key: '0-0',
                    children: [
                        {
                            label: 'Beijing',
                            value: 'Beijing',
                            key: '0-0-0',
                        },
                        {
                            label: 'Shanghai',
                            value: 'Shanghai',
                            key: '0-0-1',
                        },
                        {
                            label: 'Chengdu',
                            value: 'Chengdu',
                            key: '0-0-2',
                        },
                    ],
                },
                {
                    label: 'Japan',
                    value: 'Japan',
                    key: '0-1',
                    children: [
                        {
                            label: 'Osaka',
                            value: 'Osaka',
                            key: '0-1-0',
                        },
                    ],
                },
            ],
        },
        {
            label: 'North America',
            value: 'North America',
            key: '1',
            children: [
                {
                    label: 'United States',
                    value: 'United States',
                    key: '1-0',
                },
                {
                    label: 'Canada',
                    value: 'Canada',
                    key: '1-1',
                },
            ],
        },
    ];

    const textStyle = { margin: '20px 0 10px' };

    return (
        <div>
            <h4 style={textStyle}>maxTagCount=2:</h4>
            <TreeSelect multiple maxTagCount={2} style={{ width: 300 }} dropdownStyle={{ maxHeight: 400, overflow: 'auto' }} treeData={treeData} placeholder="当选中标签超过两个将折叠" defaultValue={['Beijing', 'Chengdu', 'Canada']} />
            <h4 style={textStyle}>maxTagCount=2, showRestTagsPopover:</h4>
            <TreeSelect showRestTagsPopover restTagsPopoverProps={{ position: 'top' }} multiple maxTagCount={2} style={{ width: 300 }} dropdownStyle={{ maxHeight: 400, overflow: 'auto' }} treeData={treeData} placeholder="hover +N 查看" defaultValue={['Beijing', 'Chengdu', 'Canada']} />
        </div>
    );
}

Searchable

Use filterTreeNode to support search input. By default it searches the label property of the data. You can use treeNodeFilterProp to set another property to search or pass in a function to filterTreeNode to customize search behavior.

You could also use showFilteredOnly if you prefer to display filtered results only.

If you want to get specific information about the search results, you can use the onSearch callback function. See the API list for the specific parameters of the function.

showFilteredOnly

Code

import { useState } from 'react';
import { TreeSelect, Switch, type TreeNodeData } from '@fibrous/semi-ui-react';
export default function TreeSelectDemo() {
    const [showFilteredOnly, setShowFilteredOnly] = useState(false);

    const treeData = [
        {
            label: 'Asia',
            value: 'Asia',
            key: '0',
            children: [
                {
                    label: 'China',
                    value: 'China',
                    key: '0-0',
                    children: [
                        {
                            label: 'Beijing',
                            value: 'Beijing',
                            key: '0-0-0',
                        },
                        {
                            label: 'Shanghai',
                            value: 'Shanghai',
                            key: '0-0-1',
                        },
                    ],
                },
                {
                    label: 'Japan',
                    value: 'Japan',
                    key: '0-1',
                    children: [
                        {
                            label: 'Osaka',
                            value: 'Osaka',
                            key: '0-1-0',
                        },
                    ],
                },
            ],
        },
        {
            label: 'North America',
            value: 'North America',
            key: '1',
            children: [
                {
                    label: 'United States',
                    value: 'United States',
                    key: '1-0',
                },
                {
                    label: 'Canada',
                    value: 'Canada',
                    key: '1-1',
                },
            ],
        },
    ];

    function onSearch(inputValue: string, filteredExpandedKeys: string[], filteredNodes: TreeNodeData[]) {
        console.log('onSearch', inputValue, filteredExpandedKeys, filteredNodes);
    }

    return (
        <>
            <span id="treeselect-searchable-filtered-only">showFilteredOnly</span>
            <Switch aria-labelledby="treeselect-searchable-filtered-only" checked={showFilteredOnly} onChange={setShowFilteredOnly} size="small" />
            <br />
            <br />
            <TreeSelect style={{ width: 300 }} dropdownStyle={{ maxHeight: 400, overflow: 'auto' }} treeData={treeData} filterTreeNode showFilteredOnly={showFilteredOnly} placeholder="单选可搜索的" onSearch={onSearch} />
            <br />
            <br />
            <TreeSelect style={{ width: 300 }} dropdownStyle={{ maxHeight: 400, overflow: 'auto' }} treeData={treeData} multiple filterTreeNode maxTagCount={2} showFilteredOnly={showFilteredOnly} placeholder="多选可搜索的" searchPlaceholder="请输入关键字开始搜索" onSearch={onSearch} />
            <br />
            <br />
            <TreeSelect style={{ width: 300 }} dropdownStyle={{ maxHeight: 400, overflow: 'auto' }} treeData={treeData} multiple filterTreeNode maxTagCount={2} showFilteredOnly={showFilteredOnly} placeholder="搜索框autofocus" searchPlaceholder="autofocus" searchAutoFocus onSearch={onSearch} />
        </>
    );
}

Remote Search

By setting the remote property, you can enable remote search. When enabled, local filtering is skipped on input, only the onSearch callback is triggered, allowing users to handle remote data fetching and update treeData.

Code

import { useState, useCallback } from 'react';
import { TreeSelect, type TreeNodeData } from '@fibrous/semi-ui-react';

export default function TreeSelectDemo() {
    const [value, setValue] = useState<string>();
    const [treeData, setTreeData] = useState<TreeNodeData[]>([]);

    const handleSearch = useCallback((inputValue: string) => {
        if (!inputValue) {
            setTreeData([]);
            return;
        }

        setTimeout(() => {
            const mockData = [
                { label: `${inputValue} - 结果1`, value: `${inputValue}-1`, key: `${inputValue}-1` },
                { label: `${inputValue} - 结果2`, value: `${inputValue}-2`, key: `${inputValue}-2` },
                { label: `${inputValue} - 结果3`, value: `${inputValue}-3`, key: `${inputValue}-3` },
            ];
            setTreeData(mockData);
        }, 500);
    }, []);

    return <TreeSelect style={{ width: 300 }} placeholder="请输入关键字进行远程搜索" treeData={treeData} filterTreeNode remote value={value} onChange={setValue} onSearch={handleSearch} />;
}

You can use searchPosition to set the position of the search box, optional: dropdown (default), trigger.

When the input box is at trigger:

The placeholder of the search box is controlled by placeholder;
When showClear=true, click the clear button of the input box, the inputValue and value will be cleared at the same time.

单选

Code

import { TreeSelect } from '@fibrous/semi-ui-react';

export default function TreeSelectDemo() {
    const treeData = [
        {
            label: 'Asia',
            value: 'Asia',
            key: '0',
            children: [
                {
                    label: 'China',
                    value: 'China',
                    key: '0-0',
                    children: [
                        {
                            label: 'Beijing',
                            value: 'Beijing',
                            key: '0-0-0',
                        },
                        {
                            label: 'Shanghai',
                            value: 'Shanghai',
                            key: '0-0-1',
                        },
                    ],
                },
                {
                    label: 'Japan',
                    value: 'Japan',
                    key: '0-1',
                    children: [
                        {
                            label: 'Osaka',
                            value: 'Osaka',
                            key: '0-1-0',
                        },
                    ],
                },
            ],
        },
        {
            label: 'North America',
            value: 'North America',
            key: '1',
            children: [
                {
                    label: 'United States',
                    value: 'United States',
                    key: '1-0',
                },
                {
                    label: 'Canada',
                    value: 'Canada',
                    key: '1-1',
                },
            ],
        },
    ];
    return (
        <>
            <TreeSelect searchPosition="trigger" style={{ width: 300 }} dropdownStyle={{ maxHeight: 400, overflow: 'auto' }} treeData={treeData} filterTreeNode placeholder="单选" />
            <br />
            <br />
            <TreeSelect searchPosition="trigger" style={{ width: 300 }} dropdownStyle={{ maxHeight: 400, overflow: 'auto' }} treeData={treeData} multiple filterTreeNode maxTagCount={2} placeholder="多选" />
        </>
    );
}

Wrap tags in trigger (triggerTagWrap)

In multiple + searchable + searchPosition="trigger" mode, if there are many selected items or the input is long, the trigger may prefer to keep a single-line layout by default.

Turn on triggerTagWrap to allow selected tags to wrap into multiple lines within the trigger.

China

Code

import { TreeSelect } from '@fibrous/semi-ui-react';

export default function TreeSelectDemo() {
    const treeData = [
        {
            label: 'Asia',
            value: 'Asia',
            key: '0',
            children: [
                {
                    label: 'China',
                    value: 'China',
                    key: '0-0',
                    children: [
                        {
                            label: 'Beijing',
                            value: 'Beijing',
                            key: '0-0-0',
                        },
                        {
                            label: 'Shanghai',
                            value: 'Shanghai',
                            key: '0-0-1',
                        },
                        {
                            label: 'Shenzhen',
                            value: 'Shenzhen',
                            key: '0-0-2',
                        },
                        {
                            label: 'Guangzhou',
                            value: 'Guangzhou',
                            key: '0-0-3',
                        },
                    ],
                },
                {
                    label: 'Japan',
                    value: 'Japan',
                    key: '0-1',
                    children: [
                        {
                            label: 'Osaka',
                            value: 'Osaka',
                            key: '0-1-0',
                        },
                    ],
                },
            ],
        },
        {
            label: 'North America',
            value: 'North America',
            key: '1',
            children: [
                {
                    label: 'United States',
                    value: 'United States',
                    key: '1-0',
                },
                {
                    label: 'Canada',
                    value: 'Canada',
                    key: '1-1',
                },
            ],
        },
    ];

    return <TreeSelect searchPosition="trigger" triggerTagWrap style={{ width: 260 }} dropdownStyle={{ maxHeight: 400, overflow: 'auto' }} treeData={treeData} multiple filterTreeNode placeholder="请选择多个选项或输入长文本" defaultValue={['Beijing', 'Shanghai', 'Shenzhen', 'Guangzhou']} />;
}

Size

You can set the size by size, one of: 'small'、'default'、'large'

Code

import { TreeSelect } from '@fibrous/semi-ui-react';

export default function TreeSelectDemo() {
    const treeData = [
        {
            label: '亚洲',
            value: 'Asia',
            key: '0',
            children: [
                {
                    label: '中国',
                    value: 'China',
                    key: '0-0',
                    children: [
                        {
                            label: '北京',
                            value: 'Beijing',
                            key: '0-0-0',
                        },
                        {
                            label: '上海',
                            value: 'Shanghai',
                            key: '0-0-1',
                        },
                    ],
                },
            ],
        },
        {
            label: '北美洲',
            value: 'North America',
            key: '1',
        },
    ];
    return (
        <div>
            <TreeSelect style={{ width: 300 }} dropdownStyle={{ maxHeight: 400, overflow: 'auto' }} treeData={treeData} multiple size="small" placeholder="small" />
            <br />
            <br />
            <TreeSelect style={{ width: 300 }} dropdownStyle={{ maxHeight: 400, overflow: 'auto' }} treeData={treeData} multiple size="default" placeholder="default" />
            <br />
            <br />
            <TreeSelect style={{ width: 300 }} dropdownStyle={{ maxHeight: 400, overflow: 'auto' }} treeData={treeData} multiple size="large" placeholder="large" />
        </div>
    );
}

Default Expand All

Both defaultExpandAll and expandAll can set the default expanded/collapsed state of TreeSelect. The difference between the two is that defaultExpandAll only takes effect during initialization, while expandAll will take effect not only during initialization, but also when the data (treeData) is dynamically updated.

In the demo below, after TreeData is updated, defaultExpandAll becomes invalid, and expandAll still takes effect.

Code

import { useEffect, useState } from 'react';
import { TreeSelect, type TreeNodeData } from '@fibrous/semi-ui-react';

const treeData: TreeNodeData[] = [
    {
        label: '亚洲',
        value: 'Asia',
        key: '0',
        children: [
            {
                label: '中国',
                value: 'China',
                key: '0-0',
                children: [
                    {
                        label: '北京',
                        value: 'Beijing',
                        key: '0-0-0',
                    },
                    {
                        label: '上海',
                        value: 'Shanghai',
                        key: '0-0-1',
                    },
                ],
            },
        ],
    },
    {
        label: '北美洲',
        value: 'North America',
        key: '1',
    },
];

export default function TreeSelectDemo() {
    const [data, setData] = useState<TreeNodeData[]>([]);

    useEffect(() => {
        const timer = setTimeout(() => setData(treeData), 500);
        return () => clearTimeout(timer);
    }, []);

    return (
        <>
            <TreeSelect style={{ width: 300, marginBottom: 20 }} expandAll treeData={data} placeholder="expandAll" />
            <TreeSelect style={{ width: 300 }} defaultExpandAll treeData={data} placeholder="defaultExpandAll" />
        </>
    );
}

Disabled

Code

import { TreeSelect } from '@fibrous/semi-ui-react';
export default function TreeSelectDemo() {
    const treeData = [
        {
            label: '亚洲',
            value: 'Asia',
            key: '0',
            children: [
                {
                    label: '中国',
                    value: 'China',
                    key: '0-0',
                    children: [
                        {
                            label: '北京',
                            value: 'Beijing',
                            key: '0-0-0',
                        },
                        {
                            label: '上海',
                            value: 'Shanghai',
                            key: '0-0-1',
                        },
                    ],
                },
            ],
        },
        {
            label: '北美洲',
            value: 'North America',
            key: '1',
        },
    ];
    return (
        <div>
            <TreeSelect style={{ width: 300 }} dropdownStyle={{ maxHeight: 400, overflow: 'auto' }} treeData={treeData} disabled placeholder="禁用下拉菜单" />
            <br />
            <br />
            <TreeSelect style={{ width: 300 }} defaultValue="Shanghai" dropdownStyle={{ maxHeight: 400, overflow: 'auto' }} treeData={treeData} disabled />
            <br />
            <br />
            <TreeSelect style={{ width: 300 }} defaultValue={['Shanghai', 'North America']} dropdownStyle={{ maxHeight: 400, overflow: 'auto' }} treeData={treeData} multiple disabled />
        </div>
    );
}

Disable Strictly

You can use disableStrictly to enable strict disabling. After enabling strict disabling, when the node is disabled, the selected state cannot be changed through the relationship between the child or the parent.

Take the following demo as an example, the node "China" is strictly disabled. Therefore, when we change the selected state of its parent node "Asia", it will not affect the selected state of the node "China".

Code

import { TreeSelect } from '@fibrous/semi-ui-react';

export default function TreeSelectDemo() {
    const treeData = [
        {
            label: '亚洲',
            value: 'Asia',
            key: '0',
            children: [
                {
                    label: '中国',
                    value: 'China',
                    key: '0-0',
                    disabled: true,
                    children: [
                        {
                            label: '北京',
                            value: 'Beijing',
                            key: '0-0-0',
                        },
                        {
                            label: '上海',
                            value: 'Shanghai',
                            key: '0-0-1',
                        },
                    ],
                },
                {
                    label: '日本',
                    value: 'Japan',
                    key: '0-1',
                },
            ],
        },
        {
            label: '北美洲',
            value: 'North America',
            key: '1',
        },
    ];
    return (
        <div>
            <TreeSelect style={{ width: 300 }} dropdownStyle={{ maxHeight: 400, overflow: 'auto' }} treeData={treeData} disableStrictly multiple defaultValue={['Shanghai']} />
        </div>
    );
}

Controlled Component

You can use value along with onChange property if you want to use TreeSelect as a controlled component.

Code

import { useState } from 'react';
import { TreeSelect } from '@fibrous/semi-ui-react';
export default function TreeSelectDemo() {
    const [value, setValue] = useState<string | undefined>('Shanghai');
    const treeData = [
        {
            label: '亚洲',
            value: 'Asia',
            key: '0',
            children: [
                {
                    label: '中国',
                    value: 'China',
                    key: '0-0',
                    children: [
                        {
                            label: '北京',
                            value: 'Beijing',
                            key: '0-0-0',
                        },
                        {
                            label: '上海',
                            value: 'Shanghai',
                            key: '0-0-1',
                        },
                    ],
                },
            ],
        },
        {
            label: '北美洲',
            value: 'North America',
            key: '1',
        },
    ];
    return <TreeSelect style={{ width: 300 }} dropdownStyle={{ maxHeight: 400, overflow: 'auto' }} treeData={treeData} value={value} placeholder="请选择" onChange={setValue} />;
}

Checked RelationShip

Version: >= 2.5.0

In multiple, checkRelation can be used to set the type of node selection relationship, optional: 'related' (default), 'unRelated'. When the selection relationship is 'unRelated', it means that selections between nodes do not affect each other.

Code

import { TreeSelect } from '@fibrous/semi-ui-react';
export default function TreeSelectDemo() {
    const treeData = [
        {
            label: '亚洲',
            value: 'Asia',
            key: '0',
            children: [
                {
                    label: '中国',
                    value: 'China',
                    key: '0-0',
                    children: [
                        {
                            label: '北京',
                            value: 'Beijing',
                            key: '0-0-0',
                        },
                        {
                            label: '上海',
                            value: 'Shanghai',
                            key: '0-0-1',
                        },
                    ],
                },
            ],
        },
        {
            label: '北美洲',
            value: 'North America',
            key: '1',
        },
    ];
    return <TreeSelect multiple defaultValue={['Asia']} checkRelation="unRelated" style={{ width: 300 }} dropdownStyle={{ maxHeight: 400, overflow: 'auto' }} treeData={treeData} />;
}

Controlled Expansion with Search

When expandedKeys is passed in, it is a controlled expansion component, which can be used with onExpand. When the expansion is controlled, if the filterTreeNode is turned on and the search is performed, the node will no longer be automatically expanded. At this time, the expansion of the node is completely controlled by the expandedKeys. You can use the parameter filteredExpandedKeys (version: >= 2.6.0) of onSearch to realize the search expansion effect when the expansion is controlled.

Code

import { useState } from 'react';
import { TreeSelect } from '@fibrous/semi-ui-react';

export default function TreeSelectDemo() {
    const [expandedKeys, setExpandedKeys] = useState<string[]>([]);
    const treeData = [
        {
            label: '亚洲',
            value: 'Asia',
            key: '0',
            children: [
                {
                    label: '中国',
                    value: 'China',
                    key: '0-0',
                    children: [
                        {
                            label: '北京',
                            value: 'Beijing',
                            key: '0-0-0',
                        },
                        {
                            label: '上海',
                            value: 'Shanghai',
                            key: '0-0-1',
                        },
                    ],
                },
                {
                    label: '日本',
                    value: 'Japan',
                    key: '0-1',
                },
            ],
        },
        {
            label: '北美洲',
            value: 'North America',
            key: '1',
        },
    ];
    return (
        <TreeSelect
            style={{ width: 300 }}
            dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
            treeData={treeData}
            filterTreeNode
            expandedKeys={expandedKeys}
            onExpand={(expandedKeys) => {
                setExpandedKeys(expandedKeys);
            }}
            onSearch={(_inputValue, filteredExpandedKeys) => {
                setExpandedKeys([...filteredExpandedKeys, ...expandedKeys]);
            }}
        />
    );
}

Virtualized TreeSelect

If you need to render large sets of tree structured data, you could use virtualized tree. In virtualized mode, animation / motion is disabled for better performance.

The property virtualize is an object consisting of the following values:

height: Height of the dropDown, If passed in as a string, computed height should not be zero for render purpose, in other words, parent node should have offsetHeight. Pass in a number recommended.
width: Width of the dropDown.
itemSize: Height for each line of treeNode, required

If tree is searchable, you could also turn on showFilteredOnly to reduce time of rendering for results.

共 0 个节点

Code

import { useState } from 'react';
import { TreeSelect, Button, type TreeNodeData } from '@fibrous/semi-ui-react';
export default function TreeSelectDemo() {
    const [gData, setGData] = useState<TreeNodeData[]>([]);
    const [total, setTotal] = useState(0);

    function generateData(x = 5, y = 4, z = 3, data: TreeNodeData[] = []) {
        // x: nodes per level. y: nodes with children per level. z: depth (0 is one level)
        function fill(level: number, preKey: string, nodes: TreeNodeData[]) {
            const parents: string[] = [];
            for (let i = 0; i < x; i++) {
                const key = `${preKey}-${i}`;
                nodes.push({ label: `${key}-标签`, key: `${key}-key`, value: `${key}-value` });
                if (i < y) {
                    parents.push(key);
                }
            }
            if (level < 0) {
                return;
            }
            parents.forEach((key, index) => {
                const children: TreeNodeData[] = [];
                nodes[index].children = children;
                fill(level - 1, key, children);
            });
        }
        fill(z, '0', data);

        let total = 0;
        for (let n = z + 1; n >= 0; n--) {
            total += x * y ** n;
        }
        return { gData: data, total };
    }

    function onGen() {
        const { gData, total } = generateData();
        setGData(gData);
        setTotal(total);
    }

    return (
        <div style={{ padding: '0 20px' }}>
            <Button onClick={onGen}>生成数据: </Button>
            <span>共 {total} 个节点</span>
            <br />
            <br />
            {Boolean(gData.length) && (
                <TreeSelect
                    style={{ width: 300 }}
                    treeData={gData}
                    filterTreeNode
                    showFilteredOnly
                    placeholder="Please select"
                    dropdownStyle={{
                        overflow: 'hidden',
                    }}
                    virtualize={{
                        itemSize: 28,
                        // Dropdown height 300 minus the search box and 8 * 2 padding; a set height fills the rest
                        height: 236,
                    }}
                />
            )}
        </div>
    );
}

Dynamic Update of Data

Code

import { useState } from 'react';
import { TreeSelect, Button, type TreeNodeData } from '@fibrous/semi-ui-react';
export default function TreeSelectDemo() {
    const [treeData, setTreeData] = useState<TreeNodeData[]>([]);

    function add() {
        const itemLength = Math.floor(Math.random() * 5) + 1;
        const nextTreeData = Array.from({ length: itemLength }, (_v, i) => {
            const length = Math.floor(Math.random() * 3);
            const children = Array.from({ length }, (_cv, ci) => {
                const child = {
                    key: `${i}-${ci}`,
                    label: `Leaf-${i}-${ci}`,
                    value: `${i}-${ci}`,
                };
                return child;
            });
            const item = {
                key: `${i}`,
                label: `Item-${i}`,
                value: `${i}`,
                children,
            };
            return item;
        });
        setTreeData(nextTreeData);
    }

    return (
        <>
            <TreeSelect style={{ width: 300 }} dropdownStyle={{ maxHeight: 400, overflow: 'auto' }} treeData={treeData} placeholder="请选择" />
            <br />
            <br />
            <Button onClick={add}>动态改变数据</Button>
        </>
    );
}

Load Data Asynchronously

You could use loadData to load treeData asynchronously on node expansion. Notice isLeaf is required to mark node as leaf in treeData.

Code

import { useState } from 'react';
import { TreeSelect, type TreeNodeData } from '@fibrous/semi-ui-react';

export default function TreeSelectDemo() {
    const initialData: TreeNodeData[] = [
        {
            label: 'Expand to load',
            value: '0',
            key: '0',
        },
        {
            label: 'Expand to load',
            value: '1',
            key: '1',
        },
        {
            label: 'Leaf Node',
            value: '2',
            key: '2',
            isLeaf: true,
        },
    ];
    const [treeData, setTreeData] = useState(initialData);

    function updateTreeData(list: TreeNodeData[], key: string | undefined, children: TreeNodeData[]): TreeNodeData[] {
        return list.map((node) => {
            if (node.key === key) {
                return { ...node, children };
            }
            if (node.children) {
                return { ...node, children: updateTreeData(node.children, key, children) };
            }
            return node;
        });
    }

    function onLoadData({ key, children }: TreeNodeData) {
        return new Promise<void>((resolve) => {
            if (children) {
                resolve();
                return;
            }
            setTimeout(() => {
                setTreeData((origin) =>
                    updateTreeData(origin, key, [
                        {
                            label: 'Child Node',
                            key: `${key}-0`,
                        },
                        {
                            label: 'Child Node',
                            key: `${key}-1`,
                        },
                    ])
                );
                resolve();
            }, 1000);
        });
    }
    return <TreeSelect loadData={onLoadData} treeData={treeData} style={{ width: 300 }} placeholder="请选择" />;
}

Custom Trigger

If the default trigger style cannot meet your needs, you can use triggerRender to customize the display of the select box.

The triggerRender input is as follows:

interface triggerRenderProps {
    componentProps: TreeSelectProps;// TreeSelect props
    disabled: boolean;              // disabled status
    value: TreeNodeData[];              // data of the selected node
    inputValue: string;             // value of the input box
    onClear: e => void;             // onClear function
    placeholder: string;            // placeholder
    /* The function called when deleting a single item,
     *   with the key of the item as an input parameter,
     *  supported from version v2.32.0
     */
    onRemove: key => void;
    /* It is used to start the search when the value of the Input box is updated.
     * When you update the value of the Input component customized by triggerRender,
     * you should call this function to synchronize the state with the TreeSelect
     * internally. you need to set the filterTreeNode parameter to non-false when use it,
     * and set searchPosition to 'trigger'. It is supported from v2.32.0
     */
    onSearch: inputValue => void;
}

Code

import { useCallback, useMemo } from 'react';
import { TreeSelect, Tag, TagInput, type TagProps, type TreeSelectTriggerRenderProps } from '@fibrous/semi-ui-react';

export default function TreeSelectDemo() {
    const treeData = useMemo(
        () => [
            {
                label: '亚洲',
                value: '亚洲',
                key: '0',
                children: [
                    {
                        label: '中国',
                        value: '中国',
                        key: '0-0',
                        children: [
                            {
                                label: '北京',
                                value: '北京',
                                key: '0-0-0',
                            },
                            {
                                label: '上海',
                                value: '上海',
                                key: '0-0-1',
                            },
                        ],
                    },
                ],
            },
            {
                label: '北美洲',
                value: '北美洲',
                key: '1',
            },
        ],
        []
    );

    const onValueChange = useCallback((value: unknown) => {
        console.log('onChange', value);
    }, []);

    const renderTrigger = useCallback(({ value, onSearch, onRemove, inputValue }: TreeSelectTriggerRenderProps) => {
        const tagInputValue = value.flatMap<string>((item) => item.key ?? []);
        const renderTagInMultiple = (key: string) => {
            const label = value.find((item) => item.key === key)?.label;
            const onCloseTag: TagProps['onClose'] = () => {
                onRemove(key);
            };
            return (
                <Tag style={{ marginLeft: 2 }} tagKey={key} key={key} onClose={onCloseTag} closable>
                    {label}
                </Tag>
            );
        };
        return <TagInput inputValue={inputValue} value={tagInputValue} onInputChange={onSearch} renderTagItem={renderTagInMultiple} />;
    }, []);

    return <TreeSelect triggerRender={renderTrigger} filterTreeNode searchPosition="trigger" multiple treeData={treeData} placeholder="Custom Trigger" onChange={onValueChange} style={{ width: 300 }} />;
}

Custom Rendering Selected Item

You can use renderSelectedItem to customize the rendering structure of the selected item in the selection box.

In not multiple mode: renderSelectedItem(treeNode: TreeNodeData) => content: ReactNode
In multiple mode: renderSelectedItem(treeNode: TreeNodeData, { index:number, onClose:function }) => { isRenderInTag: bool, content: ReactNode }
- When isRenderInTag is true, content wraps are automatically rendered in the Tag (with background color and close button)
- When isRenderInTag is false, the returned content will be rendered directly

单选

多选+ isRenderInTag=true

多选 + isRenderInTag=false

Code

import { TreeSelect, Tag, type TreeNodeData } from '@fibrous/semi-ui-react';

const treeData = [
    {
        label: '亚洲',
        value: 'Asia',
        key: '0',
        children: [
            {
                label: '中国',
                value: 'China',
                key: '0-0',
                children: [
                    {
                        label: '北京',
                        value: 'Beijing',
                        key: '0-0-0',
                    },
                    {
                        label: '上海',
                        value: 'Shanghai',
                        key: '0-0-1',
                    },
                ],
            },
        ],
    },
    {
        label: '北美洲',
        value: 'North America',
        key: '1',
    },
    {
        label: '南美洲',
        value: 'South America',
        key: '2',
    },
    {
        label: '南极洲',
        value: 'Antarctica',
        key: '3',
    },
];

export default function TreeSelectDemo() {
    return (
        <>
            <h4>单选</h4>
            <TreeSelect style={{ width: 300 }} treeData={treeData} renderSelectedItem={(item: TreeNodeData) => item.label} />
            <h4>多选+ isRenderInTag=true</h4>
            <TreeSelect style={{ width: 300 }} treeData={treeData} multiple renderSelectedItem={(item) => ({ content: item.label, isRenderInTag: true })} />
            <h4>多选 + isRenderInTag=false</h4>
            <TreeSelect
                style={{ width: 300 }}
                treeData={treeData}
                multiple
                maxTagCount={2}
                renderSelectedItem={(item, { index, onClose }) => {
                    return {
                        content: (
                            <Tag key={index} color="white" closable onClose={onClose}>
                                {item.value}
                            </Tag>
                        ),
                        isRenderInTag: false,
                    };
                }}
            />
        </>
    );
}

API Reference

Props

Property	Description	Type	Default
aria-label	Accessible name of the combobox: the search input while it is in the trigger, otherwise the trigger.	`string`	-
arrowIcon	Custom dropdown arrow icon on the right; `null` shows no arrow. With `showClear` on and a value selected, hovering shows the clear icon first.	`React.ReactNode`	`Type`
autoAdjustOverflow	Whether the popup flips its direction automatically when it is covered.	`boolean`	`true`
autoExpandParent	Whether parent nodes expand automatically.	`boolean`	`false`
autoMergeValue	Whether to merge the value: when on, selecting a parent node keeps its descendants out of the value. Works only when `leafOnly` is false.	`boolean`	`true`
borderless	Whether to use the borderless style.	`boolean`	`false`
checkRelation	In multiple mode, the relationship between the checked states of nodes: `related` or `unRelated`. With `unRelated`, the checked states of nodes do not affect each other.	`CheckRelation`	`"related"`
className	Class name of the select box, applied to the trigger element.	`string`	-
clearIcon	Custom icon of the clear button, effective when `showClear` is true.	`React.ReactNode`	-
clickToHide	Whether the dropdown closes automatically after a selection; only works in single mode.	`boolean`	`true`
clickTriggerToHide	When the panel is open, whether clicking the trigger closes it.	`boolean`	`true`
defaultExpandAll	Whether to expand all nodes on initialization. After `treeData` changes this prop no longer takes effect; use `expandAll` if you need that.	`boolean`	-
defaultExpandedKeys	Keys of the nodes expanded by default. Their direct children are displayed.	`string[]`	-
defaultOpen	Whether the dropdown is open by default.	`boolean`	`false`
defaultValue	The initially selected value, read once on mount; an array in multiple mode.	`Type`	-
disabled	Whether the component is disabled.	`boolean`	-
disableStrictly	Strict disabling: when a node is disabled, its checked state cannot be changed through its parent or child nodes.	`boolean`	`false`
dropdownClassName	Class name of the dropdown panel.	`string`	-
dropdownMatchSelectWidth	Whether the minimum width of the dropdown panel matches the width of the select box.	`boolean`	`true`
dropdownStyle	Style of the dropdown panel.	`React.CSSProperties`	-
emptyContent	Empty state shown when there is no data or the search finds no result. Without it the locale text is shown; `null` hides it.	`ReactNode`	-
expandAction	How a node expands: `false` (only the expand icon expands it), `click` or `doubleClick`.	`ExpandAction`	`false`
expandAll	Whether to expand all nodes by default. The expansion still follows this prop after `treeData` changes.	`boolean`	`false`
expandedKeys	(Controlled) Keys of the expanded nodes. Their direct children are displayed.	`string[]`	-
expandIcon	Custom expand icon: a node, or a function receiving `className`, `onClick` and `expanded`, which renders the expand button and attaches them to its element.	`Type`	-
filterTreeNode	Whether the component is searchable, or a function that customizes the search; its third argument is the node data `data`.	`Type`	`false`
insetLabel	A label inside the select box, which also names the dropdown tree.	`React.ReactNode`	-
insetLabelId	The id of the element around `insetLabel`, for `aria-labelledby` to point at.	`string`	-
keyMaps	Custom names of the key, label, value, disabled, children, isLeaf and icon fields in a node. If you rename the label field and enable search, set `treeNodeFilterProp` to one of the fields in `treeData`, or pass a custom search function to `filterTreeNode`.	`KeyMapProps`	-
labelEllipsis	Whether labels are truncated with an ellipsis on overflow. Without it, it is true when virtualized and false otherwise.	`boolean`	-
leafOnly	In multiple mode, whether only leaf nodes are displayed as tags, and the values passed to `onChange` are leaf nodes only.	`boolean`	-
loadData	Loads child nodes asynchronously and returns a Promise. Mark leaf nodes with `isLeaf` in `treeData`.	`Type`	-
loadedKeys	(Controlled) Keys of the nodes that have finished loading, used together with `loadData`.	`string[]`	-
maxTagCount	Maximum number of tags displayed; the rest are shown as +N.	`number`	-
motion	Whether the dropdown animates in and out.	`boolean`	`true`
motionExpand	Whether expanding and collapsing nodes animates.	`boolean`	`true`
multiple	Whether several nodes can be selected.	`Multiple`	`false`
onBlur	Called when focus is lost, once after each `onFocus`. Focus leaving the trigger and the dropdown passes a native FocusEvent, a click outside passes a native MouseEvent, and selecting a node that closes the dropdown passes the click or key event of that selection.	`Type`	-
onChange	Called when the selected value changes, with the value of the node (an array in multiple mode), the node data and the event. The event is `null` when a tag is closed and a `KeyboardEvent` when a node is selected from the keyboard; clearing a single selection passes `undefined`. With `onChangeWithObject` set to true, the arguments become the node data and the event.	`Type`	-
onChangeWithObject	Whether `onChange` receives all properties of the node. When true, the arguments of `onChange` become `(node, e)`.	`WithObject`	`false`
onClear	Called when the clear button is clicked.	`Type`	-
onExpand	Called when a node expands or collapses, with the array of expanded keys and `{ expanded, node }`.	`Type`	-
onFocus	Called when focus enters the trigger (including its search input and clear button) or the dropdown from outside, with the native FocusEvent; moving focus among them does not call it again. Opening again with a click or key after a selection closed the dropdown also calls it, with that click or key event; the focus that `searchAutoFocus` gives on mount passes `null`.	`Type`	-
onLoad	Called when a node has finished loading, with the set of loaded keys and the node data.	`Type`	-
onSearch	Called when the search value changes, with the search value, `filteredExpandedKeys` (keys of the nodes expanded by the search or by the value, useful when the expansion is controlled) and `filteredNodes` (the nodes that match the search).	`Type`	-
onSelect	Called when a node is selected or deselected, with the key of the node, whether it is selected, and the node data.	`Type`	-
onVisibleChange	Called when the dropdown panel is shown or hidden, with whether it is visible.	`Type`	-
optionListStyle	Style of the option list.	`React.CSSProperties`	-
outerBottomSlot	Custom content rendered at the bottom of the dropdown panel, at the same level as the option list.	`React.ReactNode`	-
outerTopSlot	Custom content rendered at the top of the dropdown panel, at the same level as the option list. With `filterTreeNode` on, it replaces the search box; to customize the search, use the `search` method through `ref`.	`React.ReactNode`	-
placeholder	Placeholder of the input box.	`string`	-
position	Position of the dropdown panel; the values follow the position of Tooltip. Defaults to `bottomLeft` (`bottomRight` in RTL).	`PopoverProps['position']`	-
prefix	Content in front of the select box.	`React.ReactNode`	-
preventScroll	Whether the browser avoids scrolling the document to show the newly focused element when the component calls `focus` internally. It does not apply to elements passed in by the user.	`boolean`	-
ref	Component handle with the `search` and `close` methods, typed as `TreeSelectHandle`. It is not a DOM element.	`Type`	-
remote	Whether remote search is enabled. When enabled, input skips local filtering and only triggers `onSearch`; the caller fetches the data and updates `treeData`.	`boolean`	`false`
renderFullLabel	Custom rendering of the whole row. The returned element is wrapped in a row element that carries `role="treeitem"` and the state attributes; usage is the same as Tree's `renderFullLabel`.	`Type`	-
renderLabel	Custom rendering of the node label. It receives the original label, the node data and the search word.	`Type`	-
renderSelectedItem	Custom rendering of the selected items in the select box. In single mode it returns the content; in multiple mode it returns `{ content, isRenderInTag }`, and when `isRenderInTag` is true the content is wrapped in a Tag with a background color and a close button.	`Type`	-
restTagsPopoverProps	Popover configuration for the collapsed tags beyond `maxTagCount`; see Popover.	`PopoverProps`	`{}`
searchAutoFocus	Whether the search box is focused on mount.	`boolean`	`false`
searchPlaceholder	Placeholder of the search box in the dropdown.	`string`	-
searchPosition	Position of the search box: `dropdown` or `trigger`.	`'dropdown' \| 'trigger'`	`"dropdown"`
searchRender	Custom search box; `false` renders no search box. It receives the input props, including `ref` and the ARIA attributes, which all belong on the input.	`Type`	-
showClear	Whether the trigger shows the clear button when the value is not empty.	`boolean`	`false`
showFilteredOnly	Whether only the filtered results are displayed while searching.	`boolean`	-
showLine	Whether the nodes in the option panel show connecting lines.	`boolean`	-
showRestTagsPopover	When the number of tags exceeds `maxTagCount`, whether hovering +N shows the remaining tags in a Popover.	`boolean`	`false`
showSearchClear	Whether the search box in the dropdown can be cleared.	`boolean`	`true`
size	Size of the input box: `large`, `small` or `default`.	`Size`	`"default"`
stopPropagation	Whether click events on the dropdown panel stop bubbling.	`boolean \| string`	`true`
style	Inline style of the select box, the trigger.	`React.CSSProperties`	-
suffix	Content after the select box.	`React.ReactNode`	-
treeData	Node data; keys are unique across the tree. Only a new array updates the options, changes made in place are not seen.	`TreeNodeData[]`	-
treeNodeFilterProp	Property of `TreeNodeData` matched by search.	`string`	`"label"`
treeNodeLabelProp	Property of `TreeNodeData` used to display the text.	`string`	`"label"`
triggerRender	Custom trigger. It receives `TriggerRenderProps` and its return value replaces the whole trigger.	`Type`	-
triggerTagWrap	Whether selected tags wrap onto multiple lines within the trigger. Only works when `multiple` and search are enabled and `searchPosition` is `trigger`.	`boolean`	`false`
validateStatus	Validation status: `warning`, `error` or `default`. It only affects the background color of the component.	`ValidateStatus`	-
value	(Controlled) The selected value. Passing it makes the component controlled, used together with `onChange`; an array in multiple mode.	`Type`	-
virtualize	Virtual list configuration: an object with `itemSize` (required, the height of each row), `height` (the height of the dropdown, a number recommended) and `width`. Animation is disabled when virtualized.	`Virtualize`	-

Methods

Method	Description	Type
close	Closes the dropdown.	`Type`
search	Searches as if the value were typed, opening the dropdown first. Needs `filterTreeNode`. Call it when the value of a search box you render outside changes.	`Type`

aria-label, aria-labelledby, aria-describedby, aria-errormessage, aria-invalid and aria-required land on the current combobox: the trigger when it is not searchable, or the search input when the search box is in the trigger. Other native attributes (such as id, data-* and onClick) land on the trigger element.

TreeNodeData

Key for TreeNodeData is required and must be unique, label can be duplicated. Value is not required. In this case, the value property in onChange, value, defaultValue and onChangeWithObject will point to key property. To ensure everything behave as expected, keep a consistency of whether to have value or not to have value.

Properties	Instructions	type	Default
value	Value	string\|number	-
label	Displayed label	string\|ReactNode	-
icon	Icon	ReactNode	-
disabled	Disabled, supported in multiple select mode	boolean	false
key	Required and must be unique	string	-
isLeaf	Whether it is a leaf node	boolean	-

Methods

Some internal methods provided by TreeSelect can be accessed through ref. Their descriptions are in the TreeSelect API reference.

Accessibility

ARIA

Following the ARIA 1.2 combobox pattern, exactly one element is the combobox. Its name comes from, in order of priority: aria-labelledby, aria-label, the rendered insetLabel (#insetLabel in Vue; without insetLabelId the component generates the id; with a prefix the insetLabel is not rendered and does not name it), and otherwise the name in the locale:
- Without search, or with searchPosition="dropdown", the trigger is a select-only combobox. The search input in the dropdown stays a text box with aria-controls, aria-autocomplete and aria-activedescendant
- With searchPosition="trigger", the search input is the combobox and the only Tab stop, with aria-autocomplete="list"; the trigger has no role. In single mode the input is empty until the user types, so the selected text is linked to it as its description (aria-describedby). Clicking anywhere on the trigger moves focus to the input;
TreeSelect allows users to set aria-describedby, aria-errormessage, aria-invalid, aria-labelledby, aria-required, in addition, Form will automatically set these properties for Form.TreeSelect;
The role="tree" list in the dropdown uses the same name source as the combobox: the same aria-labelledby ids, the same aria-label or the same insetLabel; with none of them it takes the name in the locale, like the combobox;

The nodes in the dropdown are the same as in Tree: role="treeitem" with aria-level, aria-setsize, aria-posinset and aria-disabled, and aria-expanded on nodes that can expand; a single-choice TreeSelect uses aria-selected, a multi-choice one uses aria-checked (mixed when half checked);

The expand arrow and the checkbox in front of a node only picture its state: they are hidden from screen readers and take no focus.

Keyboard Interaction

TreeSelect follows the WAI-ARIA Combobox pattern with a tree popup: focus always stays on the trigger or the search input, aria-activedescendant points at the current node, and the current node shows the focus ring. There is no current node when the dropdown opens.

While the dropdown is closed: ArrowDown, ArrowUp, Enter and Space open it; Home and End open it and move to the first or last visible node
ArrowDown, ArrowUp: move to the next or previous visible node; the first ArrowDown moves to the first node; Home, End: move to the first or last visible node
ArrowRight: expand a collapsed node; on an expanded node, move to its first child (swapped with ArrowLeft in RTL)
ArrowLeft: collapse an expanded node; otherwise move to the parent
Enter, Space: select the current node, or check and uncheck it in a multi-choice TreeSelect; disabled nodes do not respond
Typing characters: while the dropdown is open, move to the next visible node after the current one whose label starts with the typed text; characters typed in quick succession form one search string. A closed dropdown ignores them
Esc: close the dropdown

While focus is in a search input, only ArrowDown, ArrowUp and Enter move and select; the other keys (including characters, Space, Home, End, ArrowLeft and ArrowRight) edit the text.

The props passed to a custom searchRender include these ARIA attributes (aria-activedescendant, aria-controls, aria-autocomplete and the name; on the trigger, the whole set of combobox attributes including role and aria-expanded); spread them onto the input, or screen readers do not announce the current node. Put the ref on the input too (a Semi Input, a native input or a textarea); it lets a click on the selected text inside the trigger move focus to it.

With showClear, a selected value or search text, and no disabled, the trigger renders a clear button. It is a native button named "Clear TreeSelect value" from the locale, shown on hover, while the dropdown is open, or while focus is inside the TreeSelect. From the trigger or the search input, Tab moves to the clear button; Enter or Space clears, as a mouse click does, and the focus goes back to the trigger or the search input. In multiple mode Backspace in the search input also removes tags.

Demo:

    <TreeSelect
        /* other attributes */
        aria-label='example treeSelect'
    />

Design Tokens

These are the component's internal Sass variables and cannot be overridden. To customize styles, override the --semi-* CSS variables (see the Design Token page) or write unlayered CSS rules.

Sass variable	Value	Usage
$color-treeSelect_default-bg-default	var(--semi-color-fill-0)	树选择器选择框背景颜色 - 默认
$color-treeSelect_default-bg-hover	var(--semi-color-fill-1)	树选择器选择框背景颜色 - 悬停
$color-treeSelect_default-bg-active	var(--semi-color-fill-2)	树选择器选择框背景颜色 - 按下
$color-treeSelect_default-bg-focus	var(--semi-color-fill-0)	树选择器选择框背景颜色 - 选中
$color-treeSelect_default-border-default	transparent	树选择器选择框描边颜色 - 默认
$color-treeSelect_selection-text-default	var(--semi-color-text-0)	树选择器选择框回填内容文本颜色 - 默认
$color-treeSelect_default-icon-default	var(--semi-color-text-2)	树选择器选择框图标颜色 - 默认
$color-treeSelect_default-icon-hover	var(--semi-color-primary-hover)	树选择器选择框清空按钮颜色 - 悬停
$color-treeSelect_default-icon-active	var(--semi-color-primary-active)	树选择器选择框清空按钮颜色 - 按下
$color-treeSelect_default-border-hover	transparent	树选择器选择框描边颜色 - 悬浮
$color-treeSelect_default-border-focus	var(--semi-color-focus-border)	树选择器选择框描边颜色 - 选中
$color-treeSelect_search-border-default	var(--semi-color-fill-0)	树选择器菜单搜索框描边颜色 - 默认
$color-treeSelect_tag_disabled-bg-default	transparent	禁用树选择器菜单标签背景颜色
$color-treeSelect_input_disabled-bg-default	var(--semi-color-disabled-fill)	禁用树选择器选择框背景颜色
$color-treeSelect_input_disabled-text-default	var(--semi-color-disabled-text)	禁用树选择器选择框文本颜色
$color-treeSelect_input_disabled-bg-hover	var(--semi-color-disabled-fill)	禁用树选择器选择框背景颜色 - 悬浮
$color-treeSelect_input_placeholder-text-default	var(--semi-color-text-2)	树选择器选择框占位文本颜色
$color-treeSelect_warning-bg-default	var(--semi-color-warning-light-default)	警告树选择器选择框背景颜色 - 默认
$color-treeSelect_warning-border-default	var(--semi-color-warning-light-default)	警告树选择器选择框描边颜色 - 默认
$color-treeSelect_warning-bg-hover	var(--semi-color-warning-light-hover)	警告树选择器选择框背景颜色 - 悬浮
$color-treeSelect_warning-border-hover	var(--semi-color-warning-light-hover)	警告树选择器选择框描边颜色 - 悬浮
$color-treeSelect_warning-bg-focus	var(--semi-color-warning-light-default)	警告树选择器选择框背景颜色 - 选中
$color-treeSelect_warning-border-focus	var(--semi-color-warning)	警告树选择器选择框描边颜色 - 选中
$color-treeSelect_warning-bg-active	var(--semi-color-warning-light-active)	警告树选择器选择框背景颜色 - 激活
$color-treeSelect_warning-border-active	var(--semi-color-warning-light-active)	警告树选择器选择框描边颜色 - 激活
$color-treeSelect_danger-bg-default	var(--semi-color-danger-light-default)	错误树选择器选择框背景颜色 - 默认
$color-treeSelect_danger-border-default	var(--semi-color-danger-light-default)	错误树选择器选择框描边颜色 - 默认
$color-treeSelect_danger-bg-hover	var(--semi-color-danger-light-hover)	错误树选择器选择框背景颜色 - 悬浮
$color-treeSelect_danger-border-hover	var(--semi-color-danger-light-hover)	错误树选择器选择框描边颜色 - 悬浮
$color-treeSelect_danger-bg-focus	var(--semi-color-danger-light-default)	错误树选择器选择框背景颜色 - 选中
$color-treeSelect_danger-border-focus	var(--semi-color-danger)	错误树选择器选择框描边颜色 - 选中
$color-treeSelect_danger-bg-active	var(--semi-color-danger-light-active)	错误树选择器选择框背景颜色 - 激活
$color-treeSelect_danger-border-active	var(--semi-color-danger-light-active)	错误树选择器选择框描边颜色 - 激活
$radius-treeSelect	var(--semi-border-radius-small)	树选择器圆角
$width-treeSelect-border	1px	树选择器描边宽度
$width-treeSelect_search_wrapper-border	1px	树选择器搜索框描边宽度
$width-treeSelect_hover-border	$border-thickness-control-focus	树选择器选择框描边宽度 - 悬浮
$width-treeSelect_focus-border	$width-treeSelect_hover-border	树选择器选择框描边宽度 - 选中
$width-treeSelect_default	80px	树选择器最小宽度
$height-treeSelect_default	$height-control-default	树选择器选择器高度 - 默认
$font-treeSelect_default-lineHeight	$height-treeSelect_default	树选择器选择器文本行高
$font-treeSelect_default-fontWeight	$font-weight-regular	树选择器选择器文本字重
$height-treeSelect_small	$height-control-small	小尺寸树选择器选择器高度
$font-treeSelect_small-lineHeight	$height-treeSelect_small	小尺寸树选择器选择器文本行高
$height-treeSelect_large	$height-control-large	大尺寸树选择器选择器文本行高
$font-treeSelect_large-lineHeight	$height-treeSelect_large	大尺寸树选择器选择器文本行高
$font-treeSelect_prefix_suffix_fontWeight	$font-weight-bold	树选择器前缀后缀文本字重
$spacing-treeSelect_selection_tagInput_wrapper-paddingX	$spacing-extra-tight	树选择器多选标签容器水平内边距
$spacing-treeSelect_selection_tagInput_empty-marginLeft	$spacing-extra-tight	树选择器多选标签容器为空时左侧外边距
$spacing-treeSelect_selection_tagInput_notEmpty-marginLeft	-$spacing-extra-tight	树选择器多选标签容器不为空时左侧外边距
$spacing-treeSelect_selection-paddingLeft	$spacing-base-tight	树选择器单选左侧内边距
$spacing-treeSelect_tag-marginX	$spacing-super-tight	树选择器多选标签水平外边距
$spacing-treeSelect_tag-marginY	1px	树选择器多选标签垂直外边距
$spacing-treeSelect_selection_multiple-paddingLeft	4px	树选择器多选标签左侧内边距
$spacing-treeSelect_placeholder_multiple-paddingLeft	8px	树选择器多选占位文本左侧外边距
$spacing-treeSelect_prefix_text-marginY	0px	树选择器前缀文本垂直外边距
$spacing-treeSelect_prefix_text-marginX	$spacing-base-tight	树选择器前缀文本水平外边距
$spacing-treeSelect_prefix_icon-marginY	0px	树选择器前缀图标垂直外边距
$spacing-treeSelect_prefix_icon-marginX	$spacing-tight	树选择器前缀图标水平外边距
$spacing-treeSelect_selection_withSuffix-paddingRight	0px	树选择器有后缀时内容右侧内边距
$color-treeSelect_selection_TriggerSearchItem_disabled-text-default	var(--semi-color-disabled-text)	带搜索的树选择器触发器占位文本默认颜色
$color-treeSelect_inputTrigger-border-default	none	带搜索的树选择器触发器描边颜色
$color-treeSelect_inputTrigger-bg-default	transparent	带搜索的树选择器触发器背景颜色
$color-treeSelect_prefix_suffix_text-default	var(--semi-color-text-2)	带搜索的树选择器前后缀文本颜色
$width-treeSelect_arrow	32px	树选择器展开箭头宽度
$width-treeSelect_option	230px	树选择器菜单项宽度
$height-treeSelect_popover	300px	树选择器菜单高度
$height-treeSelect_selection_tagInput_wrapper_small	22px	树选择器多选搜索，搜索框在选择框时选择框最小高度 - 小尺寸
$height-treeSelect_selection_tagInput_wrapper_default	30px	树选择器多选搜索，搜索框在选择框时选择框最小高度 - 默认尺寸
$height-treeSelect_selection_tagInput_wrapper_large	38px	树选择器多选搜索，搜索框在选择框时选择框最小高度 - 大尺寸

When to Use

Demos

How to import

Basic Usage

Multi-choice

Limit Tags Number

maxTagCount=2:

maxTagCount=2, showRestTagsPopover:

Searchable

Remote Search

Search Box Position

Wrap tags in trigger (triggerTagWrap)

Size

Default Expand All

Disabled

Disable Strictly

Controlled Component

Checked RelationShip

Controlled Expansion with Search

Virtualized TreeSelect

Dynamic Update of Data

Load Data Asynchronously

Custom Trigger

Custom Rendering Selected Item

单选

多选+ isRenderInTag=true

多选 + isRenderInTag=false

API Reference

TreeSelect

TreeNodeData

Methods

Accessibility

ARIA

Keyboard Interaction

Design Tokens