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

<script lang="ts">
    import { TreeSelect } from '@fibrae/semi-ui-svelte';
</script>

Basic Usage

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

Code

<script lang="ts">
    import { TreeSelect, type TreeNodeData } from '@fibrae/semi-ui-svelte';

    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',
        },
    ];
    const style = 'width: 300px';
    const dropdownStyle = 'max-height: 400px; overflow: auto';
</script>

<TreeSelect {dropdownStyle} placeholder="请选择" {style} {treeData} />

Multi-choice

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

In multiple mode bind:value and value are arrays. Use leafOnly if you prefer to render leaf nodes only, and the value of bind:value and the arguments of onChange will also hold leaf node values only.

Code

<script lang="ts">
    import { TreeSelect, type TreeNodeData } from '@fibrae/semi-ui-svelte';

    const treeData: TreeNodeData[] = [
        {
            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 dropdownStyle = 'max-height: 400px; overflow: auto';
</script>

<div>
    <TreeSelect {dropdownStyle} multiple placeholder="请选择" style="width: 300px" {treeData} />
    <br />
    <br />
    <TreeSelect {dropdownStyle} leafOnly multiple placeholder="只渲染叶子节点" style="width: 300px" {treeData} />
    <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

<script lang="ts">
    import { TreeSelect, type TreeNodeData } from '@fibrae/semi-ui-svelte';

    const treeData: TreeNodeData[] = [
        {
            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';
    const dropdownStyle = 'max-height: 400px; overflow: auto';
</script>

<div>
    <h4 style={textStyle}>maxTagCount=2:</h4>
    <TreeSelect {dropdownStyle} maxTagCount={2} multiple placeholder="当选中标签超过两个将折叠" style="width: 300px" {treeData} value={['Beijing', 'Chengdu', 'Canada']} />
    <h4 style={textStyle}>maxTagCount=2, showRestTagsPopover:</h4>
    <TreeSelect {dropdownStyle} maxTagCount={2} multiple placeholder="hover +N 查看" restTagsPopoverProps={{ position: 'top' }} showRestTagsPopover style="width: 300px" {treeData} value={['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

<script lang="ts">
    import { Switch, TreeSelect, type TreeNodeData } from '@fibrae/semi-ui-svelte';

    let showFilteredOnly = $state(false);

    const treeData: TreeNodeData[] = [
        {
            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' },
            ],
        },
    ];

    const dropdownStyle = 'max-height: 400px; overflow: auto';

    const onSearch = (input: string, filteredExpandedKeys: string[], filteredNodes: TreeNodeData[]) => {
        console.log('onSearch', input, filteredExpandedKeys, filteredNodes);
    };
</script>

<span id="treeselect-searchable-filtered-only">showFilteredOnly</span>
<Switch aria-labelledby="treeselect-searchable-filtered-only" bind:checked={showFilteredOnly} size="small" />
<br />
<br />
<TreeSelect {dropdownStyle} filterTreeNode {onSearch} placeholder="单选可搜索的" {showFilteredOnly} style="width: 300px" {treeData} />
<br />
<br />
<TreeSelect {dropdownStyle} filterTreeNode maxTagCount={2} multiple {onSearch} placeholder="多选可搜索的" searchPlaceholder="请输入关键字开始搜索" {showFilteredOnly} style="width: 300px" {treeData} />
<br />
<br />
<TreeSelect {dropdownStyle} filterTreeNode maxTagCount={2} multiple {onSearch} placeholder="搜索框autofocus" searchAutoFocus searchPlaceholder="autofocus" {showFilteredOnly} style="width: 300px" {treeData} />

Remote Search

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

Code

<script lang="ts">
    import { TreeSelect, type TreeNodeData, type TreeSelectValue } from '@fibrae/semi-ui-svelte';

    let value = $state<TreeSelectValue | undefined>();
    let treeData = $state.raw<TreeNodeData[]>([]);

    const onSearch = (input: string) => {
        if (!input) {
            treeData = [];
            return;
        }

        setTimeout(() => {
            treeData = [
                { label: `${input} - 结果1`, value: `${input}-1`, key: `${input}-1` },
                { label: `${input} - 结果2`, value: `${input}-2`, key: `${input}-2` },
                { label: `${input} - 结果3`, value: `${input}-3`, key: `${input}-3` },
            ];
        }, 500);
    };
</script>

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

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

<script lang="ts">
    import { TreeSelect, type TreeNodeData } from '@fibrae/semi-ui-svelte';

    const treeData: TreeNodeData[] = [
        {
            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',
                },
            ],
        },
    ];
    const dropdownStyle = 'max-height: 400px; overflow: auto';
</script>

<TreeSelect {dropdownStyle} filterTreeNode placeholder="单选" searchPosition="trigger" style="width: 300px" {treeData} />
<br />
<br />
<TreeSelect {dropdownStyle} filterTreeNode maxTagCount={2} multiple placeholder="多选" searchPosition="trigger" style="width: 300px" {treeData} />

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

<script lang="ts">
    import { TreeSelect, type TreeNodeData } from '@fibrae/semi-ui-svelte';

    const treeData: TreeNodeData[] = [
        {
            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' },
            ],
        },
    ];

    const initialValue = ['Beijing', 'Shanghai', 'Shenzhen', 'Guangzhou'];
    const dropdownStyle = 'max-height: 400px; overflow: auto';
</script>

<TreeSelect {dropdownStyle} filterTreeNode multiple placeholder="请选择多个选项或输入长文本" searchPosition="trigger" style="width: 260px" {treeData} triggerTagWrap value={initialValue} />

Size

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

Code

<script lang="ts">
    import { TreeSelect, type TreeNodeData } from '@fibrae/semi-ui-svelte';

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

    const dropdownStyle = 'max-height: 400px; overflow: auto';
</script>

<div>
    <TreeSelect {dropdownStyle} multiple placeholder="small" size="small" style="width: 300px" {treeData} />
    <br />
    <br />
    <TreeSelect {dropdownStyle} multiple placeholder="default" size="default" style="width: 300px" {treeData} />
    <br />
    <br />
    <TreeSelect {dropdownStyle} multiple placeholder="large" size="large" style="width: 300px" {treeData} />
</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

<script lang="ts">
    import { onMount } from 'svelte';
    import { TreeSelect, type TreeNodeData } from '@fibrae/semi-ui-svelte';

    const source: 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',
        },
    ];
    const firstStyle = 'width: 300px; margin-bottom: 20px';
    const secondStyle = 'width: 300px';
    let data = $state.raw<TreeNodeData[]>([]);

    onMount(() => {
        const timer = setTimeout(() => {
            data = source;
        }, 500);
        return () => clearTimeout(timer);
    });
</script>

<TreeSelect expandAll placeholder="expandAll" style={firstStyle} treeData={data} />
<TreeSelect defaultExpandAll placeholder="defaultExpandAll" style={secondStyle} treeData={data} />

Disabled

Code

<script lang="ts">
    import { TreeSelect, type TreeNodeData } from '@fibrae/semi-ui-svelte';

    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',
        },
    ];
    const style = 'width: 300px';
    const dropdownStyle = 'max-height: 400px; overflow: auto';
</script>

<div>
    <TreeSelect disabled {dropdownStyle} placeholder="禁用下拉菜单" {style} {treeData} />
    <br />
    <br />
    <TreeSelect disabled {dropdownStyle} {style} {treeData} value="Shanghai" />
    <br />
    <br />
    <TreeSelect disabled {dropdownStyle} multiple {style} {treeData} value={['Shanghai', 'North America']} />
</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

<script lang="ts">
    import { TreeSelect, type TreeNodeData } from '@fibrae/semi-ui-svelte';

    const treeData: TreeNodeData[] = [
        {
            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',
        },
    ];
    const style = 'width: 300px';
    const dropdownStyle = 'max-height: 400px; overflow: auto';
</script>

<div>
    <TreeSelect disableStrictly {dropdownStyle} multiple {style} {treeData} value={['Shanghai']} />
</div>

Controlled Component

Bind the selected value with bind:value to use TreeSelect as a controlled component; changes are written back automatically. You can also pass value along with onChange. TreeSelect has no defaultValue: a one-way value={x} only seeds the selection, and for a fully controlled select use the function binding bind:value={get, set}. Binding it to undefined clears the selection.

Code

<script lang="ts">
    import { TreeSelect, type TreeNodeData, type TreeSelectValue } from '@fibrae/semi-ui-svelte';

    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',
        },
    ];
    const style = 'width: 300px';
    const dropdownStyle = 'max-height: 400px; overflow: auto';
    let value = $state<TreeSelectValue | undefined>('Shanghai');
</script>

<TreeSelect bind:value {dropdownStyle} placeholder="请选择" {style} {treeData} />

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

<script lang="ts">
    import { TreeSelect, type TreeNodeData } from '@fibrae/semi-ui-svelte';

    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',
        },
    ];
    const style = 'width: 300px';
    const dropdownStyle = 'max-height: 400px; overflow: auto';
</script>

<TreeSelect checkRelation="unRelated" {dropdownStyle} multiple {style} {treeData} value={['Asia']} />

Controlled Expansion with Search

Bind the expanded nodes with bind:expandedKeys to make the expansion controlled; you can also pass expandedKeys along with onExpand. TreeSelect has no defaultExpandedKeys. 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 of onSearch to realize the search expansion effect when the expansion is controlled.

Code

<script lang="ts">
    import { TreeSelect, type TreeNodeData } from '@fibrae/semi-ui-svelte';

    let expandedKeys = $state<string[]>([]);
    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: 'Japan',
                    key: '0-1',
                },
            ],
        },
        {
            label: '北美洲',
            value: 'North America',
            key: '1',
        },
    ];

    const onSearch = (_input: string, filteredExpandedKeys: string[]) => {
        expandedKeys = [...filteredExpandedKeys, ...expandedKeys];
    };
</script>

<TreeSelect bind:expandedKeys dropdownStyle="max-height: 400px; overflow: auto" filterTreeNode {onSearch} style="width: 300px" {treeData} />

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

<script lang="ts">
    import { Button, TreeSelect, type TreeNodeData } from '@fibrae/semi-ui-svelte';

    let treeData = $state.raw<TreeNodeData[]>([]);
    let total = $state(0);

    // x: nodes per level. y: nodes with children per level. z: depth (0 is one level).
    const generateData = (x = 5, y = 4, z = 3) => {
        const data: TreeNodeData[] = [];

        const 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 count = 0;
        for (let n = z + 1; n >= 0; n--) {
            count += x * y ** n;
        }
        return { data, count };
    };

    const onGen = () => {
        const generated = generateData();
        treeData = generated.data;
        total = generated.count;
    };

    const dropdownStyle = 'overflow: hidden';
    // Dropdown height 300 minus the search box, minus the 8 * 2 padding; a set dropdown height fills the remaining space.
    const virtualize = { itemSize: 28, height: 236 };
</script>

<div style="padding: 0 20px">
    <Button onclick={onGen}>生成数据:</Button>
    <span>共 {total} 个节点</span>
    <br />
    <br />
    {#if treeData.length}
        <TreeSelect {dropdownStyle} filterTreeNode placeholder="Please select" showFilteredOnly style="width: 300px" {treeData} {virtualize} />
    {/if}
</div>

Dynamic Update of Data

Code

<script lang="ts">
    import { Button, TreeSelect, type TreeNodeData } from '@fibrae/semi-ui-svelte';

    const style = 'width: 300px';
    const dropdownStyle = 'max-height: 400px; overflow: auto';
    // Only a new array updates the options, so the list is replaced as a whole.
    let treeData = $state.raw<TreeNodeData[]>([]);

    const add = () => {
        const itemLength = Math.floor(Math.random() * 5) + 1;
        treeData = Array.from({ length: itemLength }, (_, i) => {
            const length = Math.floor(Math.random() * 3);
            const children = Array.from({ length }, (_, ci) => ({
                key: `${i}-${ci}`,
                label: `Leaf-${i}-${ci}`,
                value: `${i}-${ci}`,
            }));
            return {
                key: `${i}`,
                label: `Item-${i}`,
                value: `${i}`,
                children,
            };
        });
    };
</script>

<TreeSelect {dropdownStyle} placeholder="请选择" {style} {treeData} />
<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

<script lang="ts">
    import { TreeSelect, type TreeNodeData } from '@fibrae/semi-ui-svelte';

    let treeData = $state.raw<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 updateTreeData = (list: TreeNodeData[], key: string | undefined, children: TreeNodeData[]): TreeNodeData[] =>
        list.map((node) => {
            if (node.key === key) {
                return { ...node, children };
            }
            if (node.children) {
                return { ...node, children: updateTreeData(node.children, key, children) };
            }
            return node;
        });

    const loadData = ({ key, children }: TreeNodeData) =>
        new Promise<void>((resolve) => {
            if (children) {
                resolve();
                return;
            }
            setTimeout(() => {
                treeData = updateTreeData(treeData, key, [
                    {
                        label: 'Child Node',
                        key: `${key}-0`,
                    },
                    {
                        label: 'Child Node',
                        key: `${key}-1`,
                    },
                ]);
                resolve();
            }, 1000);
        });
</script>

<TreeSelect {loadData} placeholder="请选择" style="width: 300px" {treeData} />

Custom Trigger

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

The parameters of the trigger snippet are as follows, typed as TreeSelectTriggerSnippetProps:

interface TreeSelectTriggerSnippetProps {
    componentProps: TreeSelectProps; // all the props given to TreeSelect
    disabled: boolean; // whether the TreeSelect is disabled
    value: TreeNodeData[]; // the data of the selected nodes
    inputValue: string; // the current value of the input box
    placeholder?: string; // placeholder
    // Clears the value; pass the click event when bound to a control inside the trigger,
    // so the click does not also open the dropdown
    onClear: (event?: MouseEvent) => void;
    // Called to remove a single item, with the key of the item
    onRemove: (key: string) => void;
    // Starts a search when the value of your Input changes; filterTreeNode must not be false
    // and searchPosition must be 'trigger'
    onSearch: (inputValue: string) => void;
}

Code

<script lang="ts">
    import { Tag, TagInput, TreeSelect, type TreeNodeData } from '@fibrae/semi-ui-svelte';

    const treeData: TreeNodeData[] = [
        {
            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 onChange = (value: unknown) => {
        console.log('onChange', value);
    };
</script>

<TreeSelect filterTreeNode multiple {onChange} placeholder="Custom Trigger" searchPosition="trigger" style="width: 300px" {treeData}>
    {#snippet trigger({ value, inputValue, onSearch, onRemove })}
        <TagInput {inputValue} onInputChange={onSearch} value={value.flatMap((item) => item.key ?? [])}>
            {#snippet tag({ value: key })}
                <Tag closable onClose={() => onRemove(key)} style="margin-inline-start: 2px" tagKey={key}>
                    {value.find((item) => item.key === key)?.label}
                </Tag>
            {/snippet}
        </TagInput>
    {/snippet}
</TreeSelect>

Custom Rendering Selected Item

You can use the selectedItem and tag snippets to customize the rendering structure of the selected items in the selection box. Both take the same parameters, typed as TreeSelectSelectedItemSnippetProps: item (the node data), index, disabled and onClose (removes the tag, or clears the selection in single mode).

In single mode the content of selectedItem is what the select box shows; empty content shows the placeholder
In multiple mode the content of selectedItem is rendered inside the built-in Tag (with background color and close button); tag replaces the whole Tag and takes precedence over selectedItem, so wire onClose to your own Tag when it needs a close button (see the demo, which calls it from the Tag's onClose)
In multiple mode, empty content from either snippet leaves the tag out

单选

多选 + 标签内渲染

多选 + 替换整个标签

Code

<script lang="ts">
    import { Tag, TreeSelect, type TreeNodeData } from '@fibrae/semi-ui-svelte';

    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',
        },
        {
            label: '南美洲',
            value: 'South America',
            key: '2',
        },
        {
            label: '南极洲',
            value: 'Antarctica',
            key: '3',
        },
    ];
</script>

<h4>单选</h4>
<TreeSelect style="width: 300px" {treeData}>
    {#snippet selectedItem({ item })}
        {item.label}
    {/snippet}
</TreeSelect>
<h4>多选 + 标签内渲染</h4>
<TreeSelect multiple style="width: 300px" {treeData}>
    {#snippet selectedItem({ item })}
        {item.label}
    {/snippet}
</TreeSelect>
<h4>多选 + 替换整个标签</h4>
<TreeSelect maxTagCount={2} multiple style="width: 300px" {treeData}>
    {#snippet tag({ item, onClose })}
        <Tag closable color="white" onClose={(event) => onClose(event)}>{item.value}</Tag>
    {/snippet}
</TreeSelect>

API Reference

Props

Property	Description	Type	Default
arrowIcon	Snippet for the dropdown arrow icon on the right; `null` shows no arrow. With `showClear` on and a value selected, hovering shows the clear icon first.	`Snippet \| null`	-
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"`
clearIcon	Snippet for the icon of the clear button, effective when `showClear` is true.	`Snippet`	-
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`	`false`
defaultOpen	Whether the dropdown is open on mount. TreeSelect has no controlled open state; call `close()` to close it.	`boolean`	`false`
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	Inline style string of the dropdown panel.	`string`	-
emptyContent	Snippet for the empty state shown when there is no data or the search finds no result. Without it the locale text is shown; `null` hides it.	`Snippet \| null`	-
expandAction	How a node expands: `false` (only the expand icon expands it), `click` or `doubleClick`.	`TreeSelectExpandAction`	`false`
expandAll	Whether to expand all nodes by default. The expansion still follows this prop after `treeData` changes.	`boolean`	`false`
expandedKeys	Keys of the expanded nodes, supports `bind:expandedKeys`; their direct children are displayed. Left out, the component manages them; for fully controlled expansion use the function binding `bind:expandedKeys={get, set}`. There is no defaultExpandedKeys.	`string[]`	-
expandIcon	Snippet for the expand icon, receiving `class`, `onClick` and `expanded`; usage is the same as the `expandIcon` of Tree. A single element gets the switcher class and the expand click from the component.	`Type`	-
filterTreeNode	Whether the component is searchable, or a function that customizes the search; its third argument is the node data `data`.	`Type`	`false`
fullLabel	Snippet for the content of a whole row, still wrapped in the row element that carries the `id`, `role="treeitem"` and the state attributes; usage is the same as the `fullLabel` of Tree.	`Type`	-
icon	Snippet for a node's icon, receiving `{ item, level, expanded, isLeaf, loading, selected, checked, halfChecked }`; usage is the same as the `icon` of Tree.	`Type`	-
insetLabel	Snippet for a label inside the select box, which also names the dropdown tree. It is not rendered, and does not name the component, when `prefix` is used.	`Snippet`	-
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`.	`TreeSelectKeyMapProps`	-
label	Snippet for a node's label, receiving `{ item, label, searchWord }`: the node data, the original label and the search word; usage is the same as the `label` of Tree.	`Type`	-
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`	`false`
loadData	Loads child nodes asynchronously and returns a Promise. Mark leaf nodes with `isLeaf` in `treeData`.	`Type`	-
loadedKeys	Keys of the nodes that have finished loading, supports `bind:loadedKeys`, 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.	`boolean`	`false`
onBlur	Called when the TreeSelect loses focus, once after each onFocus. Focus leaving the trigger and the dropdown passes a native FocusEvent, a click outside a native MouseEvent, and selecting a node that closes the dropdown 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 value and the node are both the node data.	`Type`	-
onChangeWithObject	Whether `value` and the arguments of `onChange` carry all properties of the node. When true, the value and the node in `value` and `onChange` are both the node data.	`boolean`	`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, and the focus `searchAutoFocus` gives on mount passes null.	`Type`	-
onLoad	Called when a node has finished loading.	`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	Inline style string of the option list, applied to the `role="tree"` element.	`string`	-
outerBottomSlot	Snippet rendered at the bottom of the dropdown panel, at the same level as the option list.	`Snippet`	-
outerTopSlot	Snippet 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 `bind:this`.	`Snippet`	-
placeholder	Placeholder of the input box.	`string`	-
position	Position of the popup; the values follow the position of Tooltip. Defaults to `bottomLeft` (`bottomRight` in RTL).	`Position`	-
prefix	Snippet for the content in front of the select box.	`Snippet`	-
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`	-
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`
restTagsPopoverProps	Popover configuration for the collapsed tags beyond `maxTagCount`.	`PopoverProps`	-
search	Snippet that replaces the search box. Its parameters carry the ARIA attributes (`aria-activedescendant`, `aria-controls`, `aria-autocomplete`, the name; the whole combobox set while the search box is in the trigger), `class`, `value`, `placeholder`, `showClear`, `onChange(value)` and so on; spread them with `{...props}` onto a Semi Input. `false` renders no search box, while `filterTreeNode` still filters.	`Type`	-
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`.	`TreeSelectSearchPosition`	`"dropdown"`
selectedItem	Snippet for the selected items, receiving `{ item, index, disabled, onClose }`. In single mode its content is what the select box shows, and `placeholder` shows when it is empty; in multiple mode its content goes into the built-in Tag, and an empty content renders no tag. `onClose` removes the tag, or clears the single selection.	`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`	`false`
showLine	Whether the nodes in the option panel show connecting lines.	`boolean`	`false`
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`.	`TreeSelectSize`	-
stopPropagation	Whether click events on the dropdown panel stop bubbling.	`boolean \| string`	`true`
suffix	Snippet for the content after the select box.	`Snippet`	-
tag	Snippet that replaces each tag in multiple mode, with the same parameters as `selectedItem` and ahead of it. To get a close button, wire `onClose` to your own Tag.	`Type`	-
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"`
trigger	Snippet that replaces the trigger content. Its parameters are `value` (the data of the selected nodes), `inputValue`, `placeholder`, `disabled`, `componentProps` (all the props given to TreeSelect), `onSearch` (updates the search keyword; needs `filterTreeNode` and a `searchPosition` of `trigger`), `onClear` (pass the click event when bound to a control inside the trigger, so the click does not open the dropdown) and `onRemove` (unchecks the node with the key).	`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	The selected value, supports `bind:value`; an array in multiple mode. Left out, the component manages it; a one-way `value={x}` only seeds it, and for a fully controlled select use the function binding `bind:value={get, set}`. Binding it to `undefined` clears the selection. There is no defaultValue.	`TreeSelectValue`	-
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.	`TreeVirtualize`	-

Methods

Method	Description	Type
close	Closes the dropdown.	`Type`
search	Searches as if the value were typed, opening the dropdown first. Needs `filterTreeNode`.	`Type`

The Svelte TreeSelect has no className property: class (a string, an array or an object), style (a string), data-* and other undeclared attributes and event handlers (such as onclick) land on the root element (the trigger), and onkeydown is called after the component has handled the key. aria-label, aria-labelledby, aria-describedby, aria-errormessage, aria-invalid and aria-required land on the current combobox (see ARIA). The lowercase onchange, onselect, onload, onfocus and onblur are not passed through as native listeners; use the callbacks onChange, onSelect, onLoad, onFocus and onBlur. dropdownStyle and optionListStyle are style strings. value, expandedKeys and loadedKeys are bindable, and there is no defaultValue or defaultExpandedKeys; the default of multiple can be set through the global defaults.

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 bind:value, onChange 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; use the `label` snippet for custom content	string\|number	-
disabled	Disabled, supported in multiple select mode	boolean	false
key	Required and must be unique	string	-
isLeaf	Whether it is a leaf node	boolean	-
children	Child nodes	TreeNodeData[]	-

The icon of a node comes from the icon snippet and is not declared in the data.

Methods

TreeSelect exposes the search(value) and close() methods through bind:this, typed as TreeSelectHandle. search searches as if the value were typed, opening the dropdown first, and filterTreeNode must be set; close closes the dropdown. If you need to customize the search box externally, call search when the value of the custom search box changes to change the filtering results.

<script lang="ts">
    import { TreeSelect, type TreeSelectHandle } from '@fibrae/semi-ui-svelte';

    let treeSelect = $state<TreeSelectHandle>();
</script>

<TreeSelect bind:this={treeSelect} filterTreeNode {treeData} />
<button onclick={() => treeSelect?.close()}>Close</button>

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;

aria-label, aria-labelledby, aria-describedby, aria-errormessage, aria-invalid and aria-required land on the current combobox: the root element without search, the native input of the search box in a single-choice trigger search, and the tag input in a multi-choice trigger search. With aria-labelledby set, the combobox no longer adds the default aria-label; with only the insetLabel snippet, the combobox's aria-labelledby points at it;
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 content of the fullLabel snippet is wrapped in an li carrying the id, role="treeitem" and these states;

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 parameters of the search snippet 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 the whole parameter object onto a Semi Input with {...props}, or screen readers do not announce the current node. The component finds the text field inside the rendered snippet to focus it itself, so no ref is needed.

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 aria-label="example treeSelect" {treeData} />

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

单选

多选 + 标签内渲染

多选 + 替换整个标签

API Reference

TreeSelect

TreeNodeData

Methods

Accessibility

ARIA

Keyboard Interaction

Design Tokens