---
category: Components
group: Data Entry
title: Cascader
cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*tokLTp73TsQAAAAAAAAAAAAADrJ8AQ/original
coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*5-ArSLl5UBsAAAAAAAAAAAAADrJ8AQ/original
demo:
cols: 2
---
Cascade selection box.
## When To Use
- When you need to select from a set of associated data set. Such as province/city/district, company level, things classification.
- When selecting from a large data set, with multi-stage classification separated for easy selection.
- Chooses cascade items in one float layer for better user experience.
## Examples
<!-- prettier - ignore -->
< code src = "./demo/basic.tsx" > Basic< / code >
< code src = "./demo/default-value.tsx" > Default value< / code >
< code src = "./demo/custom-trigger.tsx" > Custom trigger< / code >
< code src = "./demo/hover.tsx" > Hover< / code >
< code src = "./demo/disabled-option.tsx" > Disabled option< / code >
< code src = "./demo/change-on-select.tsx" > Change on select< / code >
< code src = "./demo/multiple.tsx" > Multiple< / code >
< code src = "./demo/showCheckedStrategy.tsx" > ShowCheckedStrategy< / code >
< code src = "./demo/size.tsx" > Size< / code >
< code src = "./demo/custom-render.tsx" > Custom render< / code >
< code src = "./demo/search.tsx" > Search< / code >
< code src = "./demo/lazy.tsx" > Load Options Lazily< / code >
< code src = "./demo/fields-name.tsx" > Custom Field Names< / code >
< code src = "./demo/suffix.tsx" debug > Custom Icons< / code >
< code src = "./demo/custom-dropdown.tsx" > Custom dropdown< / code >
< code src = "./demo/placement.tsx" > Placement< / code >
< code src = "./demo/status.tsx" > Status< / code >
< code src = "./demo/render-panel.tsx" debug > _InternalPanelDoNotUseOrYouWillBeFired< / code >
## API
```jsx
< Cascader options = {options} onChange = {onChange} / >
```
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| allowClear | Whether allow clear | boolean | true | |
| autoFocus | If get focus when component mounted | boolean | false | |
| bordered | Whether has border style | boolean | true | |
| clearIcon | The custom clear icon | ReactNode | - | |
| changeOnSelect | (Work on single select) Change value on each selection if set to true, see above demo for details | boolean | false | |
| className | The additional css class | string | - | |
| defaultValue | Initial selected value | string\[] \| number\[] | \[] | |
| disabled | Whether disabled select | boolean | false | |
| displayRender | The render function of displaying selected options | (label, selectedOptions) => ReactNode | label => label.join(`/`) | `multiple` : 4.18.0 |
| popupClassName | The additional className of popup overlay | string | - | 4.23.0 |
| dropdownRender | Customize dropdown content | (menus: ReactNode) => ReactNode | - | 4.4.0 |
| expandIcon | Customize the current item expand icon | ReactNode | - | 4.4.0 |
| expandTrigger | expand current item when click or hover, one of `click` `hover` | string | `click` | |
| fieldNames | Custom field name for label and value and children | object | { label: `label` , value: `value` , children: `children` } | |
| getPopupContainer | Parent Node which the selector should be rendered to. Default to `body` . When position issues happen, try to modify it into scrollable content and position it relative. [example ](https://codepen.io/afc163/pen/zEjNOy?editors=0010 ) | function(triggerNode) | () => document.body | |
| loadData | To load option lazily, and it cannot work with `showSearch` | (selectedOptions) => void | - | |
| maxTagCount | Max tag count to show. `responsive` will cost render performance | number \| `responsive` | - | 4.17.0 |
| maxTagPlaceholder | Placeholder for not showing tags | ReactNode \| function(omittedValues) | - | 4.17.0 |
| maxTagTextLength | Max tag text length to show | number | - | 4.17.0 |
| notFoundContent | Specify content to show when no result matches | string | `Not Found` | |
| open | Set visible of cascader popup | boolean | - | 4.17.0 |
