# @rc-component/tree-select > tree-select ui component for react Latest version **1.18.0** (published 2026-08-14) · MIT license · 0 weekly downloads ## Install ```sh npm install @rc-component/tree-select pnpm add @rc-component/tree-select yarn add @rc-component/tree-select bun add @rc-component/tree-select ``` ## Health **Score 70/100 (B)** — status: active. Positive: has types; esm support; no vulnerabilities; recently updated; high maintenance score; high quality score. Warnings: low downloads. ## Facts | | | |---|---| | Version | 1.18.0 | | Published | 2026-08-14 | | First published | 2025-02-25 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 4 | | Unpacked size | 174.4 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 312 | | Author | smith3816@gmail.com | | Maintainers | zombiej, afc163, madccc, peachscript, chenshuai2144 | | Keywords | react, react-component, react-tree-select, tree-select | ## Links - npm: https://www.npmjs.com/package/@rc-component/tree-select - Repository: https://github.com/react-component/tree-select - Homepage: https://react-component.github.io/tree-select - Issues: https://github.com/react-component/tree-select/issues - npm.io page: https://npm.io/package/@rc-component/tree-select ## Dependencies (4) - [clsx](https://npm.io/package/clsx.md) ^2.1.1 - [@rc-component/tree](https://npm.io/package/@rc-component/tree.md) ~1.5.0 - [@rc-component/util](https://npm.io/package/@rc-component/util.md) ^1.11.1 - [@rc-component/select](https://npm.io/package/@rc-component/select.md) ~1.11.0 ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 1.18.0 (latest) — 2026-08-14 - 1.17.0 — 2026-08-06 - 1.16.1 — 2026-08-04 - 1.16.0 — 2026-07-30 - 1.15.0 — 2026-07-10 - 1.13.0 — 2026-06-30 - 1.11.0 — 2026-06-25 - 1.10.0 — 2026-05-14 - 1.9.0 — 2026-03-13 - 1.8.0 — 2026-01-30 - 1.7.0 — 2026-01-22 - 1.6.0 — 2025-12-31 - 1.5.0 — 2025-12-24 - 1.4.0 — 2025-12-02 - 1.3.1 — 2025-11-25 - … 11 more at https://npm.io/package/@rc-component/tree-select/versions ## README

@rc-component/tree-select

Ant Design Part of the Ant Design ecosystem.

🌳 React TreeSelect component for choosing values from tree data, with search, checkable nodes, async loading, and virtual scrolling.

NPM version npm downloads build status Codecov bundle size dumi

English | 简体中文

## Highlights | Area | Support | | --------- | --------------------------------------------------------- | | Data | Tree data, simple mode, custom field names | | Selection | Single, multiple, checkable, strict check, label-in-value | | Search | Controlled search, custom filter, auto clear | | Loading | Async tree loading and controlled loaded keys | | Scale | Virtual scrolling with configurable list metrics | ## Install ```bash npm install @rc-component/tree-select ``` ## Usage ```tsx | pure import TreeSelect from '@rc-component/tree-select'; const treeData = [ { title: 'Parent', value: 'parent', children: [ { title: 'Child', value: 'child', }, ], }, ]; export default () => ; ``` ## Examples Run the local dumi site: ```bash npm install npm start ``` Then open `http://localhost:8000`. ## API ### TreeSelect TreeSelect also accepts public props from `@rc-component/select` `BaseSelect`, except for the internal `mode`, `classNames`, `styles`, and `showSearch` props that are redefined by TreeSelect. | Name | Description | Type | Default | | ----------------------- | -------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------ | | autoClearSearchValue | Deprecated. Use `showSearch.autoClearSearchValue` instead. | boolean | true | | classNames | Semantic class names. | `Partial> & { popup?: Partial> }` | - | | defaultValue | Initial selected value. | `ValueType` | - | | fieldNames | Customize field names for tree data. | `FieldNames` | - | | filterTreeNode | Deprecated. Use `showSearch.filterTreeNode` instead. | boolean \| `(inputValue: string, treeNode: DataNode) => boolean` | - | | inputValue | Deprecated. Use `showSearch.searchValue` instead. | string | - | | labelInValue | Whether to return labeled value objects instead of raw values. | boolean | false | | listHeight | Popup list height. | number | 200 | | listItemHeight | Popup list item height. | number | 20 | | listItemScrollOffset | Popup list item scroll offset. | number | 0 | | loadData | Load tree data asynchronously. | `(dataNode: LegacyDataNode) => Promise` | - | | maxCount | Maximum selected item count in multiple or checkable mode. | number | - | | multiple | Enable multiple selection. | boolean | false | | onChange | Called when selected value changes. | `(value: ValueType, labelList: ReactNode[], extra: ChangeEventExtra) => void` | - | | onDeselect | Called when a value is deselected. | `(value: ValueType, option: OptionType) => void` | - | | onPopupVisibleChange | Called when popup visibility changes. | `(open: boolean) => void` | - | | onSearch | Deprecated. Use `showSearch.onSearch` instead. | `(value: string) => void` | - | | onSelect | Called when a value is selected. | `(value: ValueType, option: OptionType) => void` | - | | onTreeExpand | Called when expanded tree keys change. | `(expandedKeys: SafeKey[]) => void` | - | | onTreeLoad | Called when async loaded keys change. | `(loadedKeys: SafeKey[]) => void` | - | | searchValue | Deprecated. Use `showSearch.searchValue` instead. | string | - | | showCheckedStrategy | Configure how checked values are displayed. | `SHOW_ALL` \| `SHOW_PARENT` \| `SHOW_CHILD` | `SHOW_CHILD` when `treeCheckable` is enabled, otherwise `SHOW_ALL` | | showSearch | Enable search or configure search behavior. | boolean \| `SearchConfig` | - | | showTreeIcon | Whether to show tree icons. | boolean | false | | styles | Semantic styles. | `Partial> & { popup?: Partial> }` | - | | switcherIcon | Custom tree switcher icon. | `IconType` | - | | treeCheckable | Whether to show checkboxes in the tree. | boolean \| ReactNode | false | | treeCheckStrictly | Check tree nodes precisely without parent-child association. | boolean | false | | treeData | Tree node data. | `OptionType[]` | - | | treeDataSimpleMode | Enable simple tree data mode. | boolean \| `SimpleModeConfig` | false | | treeDefaultExpandAll | Expand all tree nodes by default. | boolean | false | | treeDefaultExpandedKeys | Initial expanded tree keys. | `SafeKey[]` | - | | treeExpandAction | Expand action for tree nodes. | false \| `click` \| `doubleClick` | `click` | | treeExpandedKeys | Controlled expanded tree keys. | `SafeKey[]` | - | | treeIcon | Custom tree icon. | `IconType` | - | | treeLine | Whether to show tree lines. | boolean | false | | treeLoadedKeys | Controlled loaded tree keys. | `SafeKey[]` | - | | treeMotion | Tree motion config. | any | - | | treeNodeFilterProp | Deprecated. Use `showSearch.treeNodeFilterProp` instead. | string | `value` | | treeNodeLabelProp | Tree node prop rendered as selected label. | string | `title` | | treeTitleRender | Custom tree node title renderer. | `(node: OptionType) => ReactNode` | - | | value | Controlled selected value. | `ValueType` | - | | virtual | Disable virtual scrolling when set to `false`. | boolean | - | ### SearchConfig | Name | Description | Type | Default | | -------------------- | ------------------------------------------------------------------- | ---------------------------------------------------------------- | ------- | | autoClearSearchValue | Clear search input after selecting or deselecting in multiple mode. | boolean | true | | filterTreeNode | Filter tree nodes by search input. | boolean \| `(inputValue: string, treeNode: DataNode) => boolean` | - | | onSearch | Called when search input changes. | `(value: string) => void` | - | | searchValue | Controlled search input value. | string | - | | treeNodeFilterProp | Tree node prop used for filtering when `filterTreeNode` is enabled. | string | `value` | ### DataNode | Name | Description | Type | Default | | -------- | ---------------------- | ------------ | ------- | | children | Child tree nodes. | `DataNode[]` | - | | disabled | Disable the tree node. | boolean | false | | key | Unique tree node key. | `React.Key` | - | | title | Tree node title. | ReactNode | - | | value | Tree node value. | `SafeKey` | - | ### TreeNode Using `treeData` is recommended. `TreeNode` is kept for legacy usage. | Name | Description | Type | Default | | -------- | ----------------------------- | --------- | ------- | | disabled | Disable the tree node. | boolean | false | | isLeaf | Mark the node as a leaf node. | boolean | false | | key | Unique tree node key. | React.Key | - | | title | Tree node title. | ReactNode | - | | value | Tree node value. | SafeKey | - | ## Notes For large trees, avoid expanding all nodes by default. Prefer virtual scrolling, keep the number of simultaneous TreeSelect instances low, and use `treeCheckStrictly` when checkable mode has many nodes. In `treeCheckable` mode, removing a selected item from the selector and unchecking the matching tree node produce the same selected values, but they are different interactions. Both trigger `onChange`, and the `extra` argument may therefore differ. ## Development ```bash npm install npm start npm test npm run lint npm run compile ``` The dumi site runs at `http://localhost:8000` by default. ## Release ```bash npm run prepublishOnly ``` The release flow is handled by `@rc-component/np` through the `rc-np` command after the package build. ## License @rc-component/tree-select is released under the [MIT](./LICENSE) license. --- _Source: https://npm.io/package/@rc-component/tree-select · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._