# @rc-component/cascader > cascade select ui component for react Latest version **1.25.0** (published 2026-08-21) · MIT license · 0 weekly downloads ## Install ```sh npm install @rc-component/cascader pnpm add @rc-component/cascader yarn add @rc-component/cascader bun add @rc-component/cascader ``` ## 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.25.0 | | Published | 2026-08-21 | | First published | 2025-02-25 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 4 | | Unpacked size | 180.2 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 233 | | Author | afc163@gmail.com | | Maintainers | zombiej, afc163, madccc, peachscript, chenshuai2144 | | Keywords | react, react-component, react-cascader, react-select, select, cascade, cascader | ## Links - npm: https://www.npmjs.com/package/@rc-component/cascader - Repository: https://github.com/react-component/cascader - Homepage: https://react-component.github.io/cascader - Issues: https://github.com/react-component/cascader/issues - npm.io page: https://npm.io/package/@rc-component/cascader ## 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.25.0 (latest) — 2026-08-21 - 1.24.0 — 2026-08-14 - 1.23.0 — 2026-08-06 - 1.22.0 — 2026-07-30 - 1.21.0 — 2026-07-10 - 1.19.0 — 2026-06-30 - 1.17.0 — 2026-06-25 - 1.16.1 — 2026-05-27 - 1.16.0 — 2026-05-14 - 1.15.0 — 2026-03-13 - 1.14.0 — 2026-01-30 - 1.13.0 — 2026-01-27 - 1.12.1 — 2026-01-27 - 1.12.0 — 2026-01-22 - 1.11.0 — 2025-12-31 - … 17 more at https://npm.io/package/@rc-component/cascader/versions ## README

@rc-component/cascader

Ant Design Part of the Ant Design ecosystem.

🧭 React Cascader component for selecting values from hierarchical option trees, with search, multiple selection, async loading, and custom rendering.

NPM version npm downloads build status Codecov bundle size dumi

English | 简体中文

## Highlights | Area | Support | | --------- | ---------------------------------------------------------------- | | Data | Nested options, field name mapping, disabled nodes | | Selection | Single, multiple, checkable, and change-on-select flows | | Search | Controlled search, custom filter, custom sort, custom render | | Loading | Async option loading with `loadData` | | Rendering | Custom option label, dropdown content, icons, and expand trigger | ## Install ```bash npm install @rc-component/cascader ``` ## Usage ```tsx | pure import Cascader from '@rc-component/cascader'; const options = [ { label: 'Zhejiang', value: 'zhejiang', children: [ { label: 'Hangzhou', value: 'hangzhou', children: [{ label: 'Xihu', value: 'xihu' }], }, ], }, { label: 'Jiangsu', value: 'jiangsu', children: [{ label: 'Nanjing', value: 'nanjing' }], }, ]; export default () => ( ); ``` ## Examples Run the local dumi site: ```bash npm install npm start ``` Then open `http://localhost:8000`. ## API ### Cascader | Property | Type | Default | Description | | -------------------- | ------------------------------------------------------- | ---------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- | | autoClearSearchValue | boolean | true | Deprecated. Use `showSearch.autoClearSearchValue` instead. | | builtinPlacements | BuildInPlacements | - | Custom popup placements. | | changeOnSelect | boolean | false | Trigger `onChange` when selecting each level. | | checkable | boolean \| ReactNode | false | Enable multiple selection with checkbox UI. | | checkStrictly | boolean | false | Only for `checkable`. Parent/children checked independently (no conduction, no half-checked); `showCheckedStrategy` ignored. | | children | ReactElement | - | Trigger element. | | classNames | Semantic class name map | - | Semantic class names for selector and popup elements. | | defaultValue | string[] \| number[] \| Array | - | Initial selected value. | | displayRender | `(label, selectedOptions) => ReactNode` | - | Render selected labels. | | expandIcon | ReactNode | `>` | Custom expand icon. | | expandTrigger | `click` \| `hover` | `click` | Trigger action for expanding the next option level. | | fieldNames | `{ label?: string; value?: string; children?: string }` | `{ label: 'label', value: 'value', children: 'children' }` | Custom option field names. | | loadData | `(selectedOptions) => void` | - | Load child options asynchronously. | | loadingIcon | ReactNode | - | Custom loading icon. | | onChange | `(value, selectedOptions) => void` | - | Called when selection changes. | | onPopupVisibleChange | `(open: boolean) => void` | - | Called when popup visibility changes. | | onSearch | `(value: string) => void` | - | Deprecated. Use `showSearch.onSearch` instead. | | open | boolean | - | Controlled popup visibility. | | optionRender | `(option) => ReactNode` | - | Custom option renderer. | | options | Option[] | - | Hierarchical option data. | | placement | Select placement | - | Popup placement. | | popupClassName | string | - | Popup class name. | | popupMenuColumnStyle | CSSProperties | - | Style for each popup menu column. | | prefixCls | string | `rc-cascader` | Class name prefix. | | searchValue | string | - | Deprecated. Use `showSearch.searchValue` instead. | | showCheckedStrategy | `SHOW_PARENT` \| `SHOW_CHILD` | `SHOW_PARENT` | Strategy for rendering checked values in multiple mode. | | showSearch | boolean \| SearchConfig | false | Enable and configure search. | | styles | Semantic style map | - | Semantic styles for selector and popup elements. | | value | string[] \| number[] \| Array | - | Controlled selected value. | `Cascader` also accepts public props from `@rc-component/select` `BaseSelect`, except private select-only props such as `mode`, `labelInValue`, `showSearch`, and `tokenSeparators`. ### SearchConfig | Property | Type | Default | Description | | -------------------- | -------------------------------------------------------- | ------- | ---------------------------------------------------------- | | autoClearSearchValue | boolean | true | Clear search text after selecting an item. | | filter | `(inputValue, options, fieldNames) => boolean` | - | Return `true` to include an option path in search results. | | limit | number \| false | 50 | Limit the number of filtered items. | | matchInputWidth | boolean | true | Whether the search result width matches the input width. | | onSearch | `(value: string) => void` | - | Called when search text changes. | | render | `(inputValue, path, prefixCls, fieldNames) => ReactNode` | - | Render a filtered option path. | | searchValue | string | - | Controlled search text. | | sort | `(a, b, inputValue, fieldNames) => number` | - | Sort filtered option paths. | ### Option | Property | Type | Default | Description | | --------------- | ------------------------ | ------- | ------------------------------------------------ | | children | Option[] | - | Child options. | | disabled | boolean | false | Disable this option. | | disableCheckbox | boolean | false | Disable this option's checkbox in multiple mode. | | label | ReactNode | - | Display label. | | value | string \| number \| null | - | Option value. | ## Development ```bash npm install npm start ``` The dumi site runs at `http://localhost:8000` by default. Common commands: ```bash npm run lint npm test npm run tsc npm run lint:tsc npm run compile ``` ## 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/cascader is released under the [MIT](./LICENSE) license. --- _Source: https://npm.io/package/@rc-component/cascader · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._