Cascader

Single selection of data with hierarchical relationship structure.

Import 

import { Cascader } from 'rsuite';

// or
import Cascader from 'rsuite/Cascader';

Examples

Basic

Appearance

Size

Block

Placement

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

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.

Contorlled

Container and prevent overflow

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';
Vercel banner