TreeSelect

Tree selection control.

When To Use

TreeSelect is similar to Select, but the values are provided in a tree like structure. Any data whose entries are defined in a hierarchical manner is fit to use this control. Examples of such case may include a corporate hierarchy, a directory structure, and so on.

Examples

• Basic · basic
• Multiple Selection · multiple
• Generate from tree data · treeData
• Checkable · checkable
• Asynchronous loading · async
• Show Tree Line · treeLine
• Placement · placement
• Variants · variant
• Status · status
• Max Count · maxCount
• Prefix and Suffix · suffix
• Custom semantic dom styling · style-class

API

Common props ref：Common props

Tree props

showSearch

Tree Methods

TreeNode props

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

Semantic DOM

Semantic description source: vendor/.dumi/theme/common/TreeSelectSemanticTemplate.tsx

Design Token

Types, inheritance and declarations retain the pinned native source. Defaults are computed by the native theme and may be overridden by ConfigProvider; this table does not invent static defaults.

Native ComponentToken declares no directly extractable own fields. Shared tokens and inheritance are defined by the declarations below.

Declaration source: vendor/components/tree-select/style/index.ts

import { unit } from '@ant-design/cssinjs';

import { getStyle as getCheckboxStyle } from '../../checkbox/style';

import type {
  AliasToken,
  CSSUtil,
  FullToken,
  GenerateStyle,
  GetDefaultToken,
} from '../../theme/internal';

import { genStyleHooks, mergeToken } from '../../theme/internal';

import type { TreeSharedToken } from '../../tree/style';

import { genTreeStyle, initComponentToken } from '../../tree/style';

export interface ComponentToken extends TreeSharedToken {}

interface TreeSelectToken extends FullToken<'TreeSelect'> {
  treePrefixCls: string;
}

FAQ

How to get parent node in onChange?

We don't provide this since performance consideration. You can get by this way: https://codesandbox.io/s/get-parent-node-in-onchange-eb1608

Why sometimes customize Option cause scroll break?

You can ref Select FAQ.

Why loadData not trigger when searching?

In earlier version, loadData will be triggered when searching. But we got feedback that it will block network when inputting. So we change it to not trigger loadData when searching. But you can still handle async logic by filterTreeNode:

<TreeSelect
  filterTreeNode={(input, treeNode) => {
    const match = YOUR_LOGIC_HERE;

    if (match && !treeNode.isLeaf && !treeNode.children) {
      // Do some loading logic
    }

    return match;
  }}
/>

Why can't popup scroll horizontally?

Just turn off virtual scrolling, because the scrollWidth of the complete list cannot be accurately measured when virtual scrolling is turned on.

Shared native props

Tips: The following generic properties apply to most antd components; those not supported are described separately.

Install and reproduce an example

npm install antd@6.6.5 @ant-design/icons@6.3.4 dayjs@1.11.23

Use ConfigProvider and native App; configure dayjs locale separately. Each example lists its complete source files and additional pinned dependencies in View code. Example names select demos, not universal component props. See the resource setup guide for theme, locale and SSR.

Native type references

The source viewer includes unchanged native implementations and the following source declarations. Inherited types remain in their native packages. English source comments are preserved as code reference.

• vendor/components/tree-select/index.tsx
• vendor/components/tree-select/style/index.ts

Source and license

https://github.com/ant-design/ant-design/tree/4a39f54842eade4e565ab336ef6097cd7e723cdd

Original bilingual prose and executable examples are retained. Website-only embeds and token tables are expanded locally. Ant Design is MIT; separately listed dependency notices also apply. Upload previews block outbound requests and do not provide a backend.