CascaderView

CascaderView is the content area of Cascader.

Install

npm install antd-mobile@5.43.0

antd-mobile is for mobile web, not React Native or Mini Programs. React 19 projects must register createRoot with unstableSetRender at the entry, or imperative APIs such as Toast and Dialog cannot render. Switch dark mode with <html data-prefers-color-scheme="dark">.

Examples come from the official Ant Design Mobile repository (MIT) at the commit published as npm 5.43.0. Presentation helpers such as DemoBlock are JGuang rewrites, not antd-mobile APIs.

CascaderView is the content area of Cascader.

Demos

CascaderView

Props

Name	Description	Type	Default
activeIcon	The icon displayed when selected	`ReactNode`	-
defaultValue	Default selected options	`CascaderValue[]`	`[]`
fieldNames	Custom field name for label and value and disabled and children	`{ label: string, value: string, disabled: string, children: string }`	`{ label: 'label', value: 'value',disabled:'disabled', children: 'children' }`
onChange	Triggered when the selected options are changed	`(value: CascaderValue[], extend: CascaderValueExtend) => void`	-
onTabsChange	Callback when switching panel	`(index: number) => void`	-
options	Data of the cascade options	`CascaderOption[]`	-
placeholder	Hint text	`string` \| `(index: number) => string`	`'请选择'`
value	Selected options	`CascaderValue[]`	-
loading	Open the skeleton screen	`boolean`	`false`
optionRender	Custom render function for options	`(option: CascaderOption, info: { depth: number, active: boolean }) => ReactNode`	-

For the type definition of CascaderValue CascaderOption CascaderValueExtend, please refer to the document of Cascader.

Loading <Experimental></Experimental>

You can pass CascaderView.optionSkeleton as CascaderOption[] to the options property of CascaderView or the children of CascaderOption. CascaderView will recognize it and display the skeleton screen effect.

CSS Variables

Name	Description	Default
--height	height of the CascaderView	`auto`