Cascader
Single selection of data with hierarchical relationship structure.
Import
import { Cascader } from 'rsuite';
// or
import Cascader from 'rsuite/Cascader';Examples
Default
Select
Appearance
Default
Subtle
Size
Block
Select
Placement
topStart
bottomStart
autoVerticalStart
Tip: When set to
auto*, try to scroll the page, or change the browser size, it will automatically appear in the right place.
Parent selectable
Select
Custom options
Select
Disabled and read only
Sichuan / Chengdu
Sichuan / Chengdu
Sichuan / Chengdu
Sichuan / Chengdu
Async Data
This tree allows the use of the getChildren option and the length of the children field on the node to be 0 to load children asynchronously.
Select
Contorlled
Sichuan / Zigong / Gongjing
Container and prevent overflow
Select
Inline
Accessibility
Learn more in Accessibility.
Props
<Cascader>
| Property | Type(Default) |
Description |
|---|---|---|
| appearance | 'default' | 'subtle' ('default') |
Set picker appearence |
| block | boolean | Blocking an entire row |
| childrenKey | string ('children') |
Set children key in data |
| classPrefix | string ('picker') |
The prefix of the component CSS class |
| cleanable | boolean (true) |
Whether the selected value can be cleared |
| container | HTMLElement | (() => HTMLElement) | Sets the rendering container |
| data * | ItemDataType[] | The data of component |
| defaultValue | string | Default values of the selected items |
| disabled | boolean | Disabled component |
| disabledItemValues | string[] | Disabled items |
| getChildren | (item: ItemDataType) => Promise<ItemDataType[]> | Asynchronously load the children of the tree node. |
| height | number (320) |
The height of Dropdown |
| inline | boolean | The menu is displayed directly when the component is initialized |
| labelKey | string ('label') |
Set label key in data |
| locale | PickerLocaleType | Locale text |
| menuHeight | number | Sets the height of the menu |
| menuWidth | number | Sets the width of the menu |
| onChange | (value:string, event) => void | Callback fired when value change |
| onClean | (event) => void | Callback fired when value clean |
| onClose | () => void | Callback fired when close component |
| onEnter | () => void | Callback fired before the overlay transitions in |
| onEntered | () => void | Callback fired after the overlay finishes transitioning in |
| onEntering | () => void | Callback fired as the overlay begins to transition in |
| onExit | () => void | Callback fired right before the overlay transitions out |
| onExited | () => void | Callback fired after the overlay finishes transitioning out |
| onExiting | () => void | Callback fired as the overlay begins to transition out |
| onOpen | () => void | Callback fired when open component |
| onSearch | (searchKeyword:string, event) => void | callback function for Search |
| onSelect | (item: ItemDataType, selectedPaths: ItemDataType[], event) => void | Callback fired when item is selected |
| open | boolean | Whether open the component |
| parentSelectable | boolean | Make parent node selectable |
| placeholder | ReactNode ('Select') |
Setting placeholders |
| placement | Placement ('bottomStart') |
The placement of component |
| preventOverflow | boolean | Prevent floating element overflow |
| renderExtraFooter | () => ReactNode | custom render extra footer |
| renderMenu | (items: ItemDataType[], menu: ReactNode, parentNode?: ItemDataType, layer?: number) => ReactNode | Customizing the Rendering Menu list |
| renderMenuItem | (label: ReactNode,item: ItemDataType) => ReactNode | Custom render menu items |
| renderSearchItem | (label:ReactNode, items: ItemDataType[]) => ReactNode | Custom render search result items |
| renderValue | (value: string, selectedPaths: ItemDataType[], selectedElement:ReactNode) => ReactNode | Custom render selected items |
| searchable | boolean (true) |
Whether you can search for options. |
| size | 'lg' | 'md' | 'sm' | 'xs' ('md') |
A picker can have different sizes |
| toggleAs | ElementType ('a') |
You can use a custom element for this component |
| value | string | Specifies the values of the selected items(Controlled) |
| valueKey | string ('value') |
Set value key in data |
| caretAs | ElementType | Custom component for the caret icon |
ts:ItemDataType
interface ItemDataType {
/** The value of the option corresponds to the `valueKey` in the data. **/
value: string;
/** The content displayed by the option corresponds to the `labelKey` in the data. **/
label: ReactNode;
/**
* The data of the child option corresponds to the `childrenKey` in the data.
* Properties owned by tree structure components, such as TreePicker, Cascader.
*/
children?: ItemDataType[];
/**
* Properties of grouping functional components, such as CheckPicker, InputPicker
*/
groupBy?: string;
/**
* The children under the current node are loading.
* Used for components that have cascading relationships and lazy loading of children. E.g. Cascader, MultiCascader
*/
loading?: boolean;
}
ts:Placement
type Placement = 'bottomStart' | 'topStart' | 'autoVerticalStart';