Cascader
The Cascader component displays a hierarchical list of options.
Import
import { Cascader } from 'rsuite';Examples
Basic
Appearance
Size
Block
Placement and Prevent overflow
Parent selectable
Custom options
Disabled and read only
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.
Controlled
Responsive
Accessibility
ARIA properties
- Cascader has role
combobox. - Has the
aria-haspopup="tree"attribute to indicate that the combobox has a popup tree. - Has the
aria-expandedattribute to indicate whether the tree is open or not. - Has the
aria-controlsattribute to indicate the ID of the tree element. - Has the
aria-activedescendantattribute to indicate the ID of the focused tree node. - When
labelis set, thearia-labelledbyattribute is added to the combobox element and the tree element and is set to the value of theidattribute oflabel.
Keyboard interactions
- ↓ - Move focus to the next tree node.
- ↑ - Move focus to the previous tree node.
- → - Expand the focused tree node if it is collapsed.
- ← - Collapse the focused tree node if it is expanded.
- Enter - Select the focused tree node.
- Esc - Close the tree.
Props
<Cascader>
| Property | Type(Default) |
Description |
|---|---|---|
| appearance | 'default' | 'subtle' ('default') |
Set picker appearance |
| block | boolean | Occupy the full width of the parent container |
| caretAs | ElementType | Custom component for the caret icon |
| 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 |
| columnHeight | number | Sets the height of the column |
| columnWidth | number | Sets the width of the column |
| container | HTMLElement | (() => HTMLElement) | Sets the rendering container |
| data * | Option[] | The data of component |
| defaultValue | string | Default values of the selected items |
| disabled | boolean | Whether to disable the component |
| disabledItemValues | string[] | Values of disabled items |
| getChildren | (item: Option) => Promise<Option[]> | Asynchronously load the children of the tree node |
| height | number (320) |
The height of Dropdown |
| labelKey | string ('label') |
Set label key in data |
| loading | boolean (false) |
Whether to display a loading state indicator |
| locale | PickerLocaleType | Locale text settings |
| onChange | (value:string, event) => void | Callback fired when value changes |
| onClean | (event) => void | Callback fired when value is cleared |
| onClose | () => void | Callback fired when component closes |
| 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 component opens |
| onSearch | (search:string, event) => void | Callback function for search |
| onSelect | (item: Option, selectedPaths: Option[], event) => void | Callback fired when an item is selected |
| open | boolean | Whether the component is open |
| parentSelectable | boolean | Whether parent nodes are selectable |
| placeholder | ReactNode ('Select') |
Placeholder text |
| placement | Placement ('bottomStart') |
The placement of component |
| popupClassName | string | Custom CSS class for the popup |
| popupStyle | CSSProperties | Custom style for the popup |
| preventOverflow | boolean | Prevent floating element overflow |
| renderColumn | (childNodes: ReactNode, column: { items, parentItem, layer}) => ReactNode | Custom render function for column list |
| renderExtraFooter | () => ReactNode | Custom render function for extra footer |
| renderSearchItem | (node: ReactNode, items: Option[]) => ReactNode | Custom render function for search result items |
| renderTreeNode | (node: ReactNode, item: Option) => ReactNode | Custom render function for tree nodes |
| renderValue | (value: string, selectedPaths: Option[], selected:ReactNode) => ReactNode | Custom render function for selected items |
| searchable | boolean (true) |
Whether the component is searchable |
| size | 'lg' | 'md' | 'sm' | 'xs' ('md') |
Size of the component |
| toggleAs | ElementType ('a') |
Custom element for the component |
| value | string | Value of the component (Controlled) |
| valueKey | string ('value') |
Set value key in data |
Option
interface Option<V> {
/** The value of the option corresponds to the `valueKey` in the data. **/
value: V;
/** 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?: Option<V>[];
/**
* 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;
}
Placement
type Placement = 'bottomStart' | 'topStart' | 'autoVerticalStart';