Cascader

Display options in a multi-level cascading dropdown component.

Install

npm install @arco-design/web-react@2.66.18

Import @arco-design/web-react/dist/css/arco.css at the entry and set the locale with ConfigProvider. React 19 projects must also import @arco-design/web-react/es/_util/react-19-adapter first, or imperative APIs such as Message and Modal cannot render.

Examples

• Basic: The basic usage. If expandTrigger is 'hover', next level menu will be expanded when current option is hovered.
• Allow clear: Allow clear.
• Front label: Specify addBefore to add elements before the select box. (2.41.0)
• Customize selected value: The return value will be displayed in the input box
• Customize select box: children will override the default select box node.
• Change on select: Each selection will change value if set to true. when mode=multiple, child node and parent node will not affect each other.
• Multiple: Allow multiple selection. Set the 'checkedStrategy' property to set the data echo mode(2.31.0).
• Search: Specify showSearch=true, you can enter text to search for options.
• Customize search logic: Customize the search logic.
• Load options lazily: Load options lazily with loadMore. Please note when you use loadMore: 1. Option should have the isLeaf property to indicate whether to continue loading options when clicked 2. If showSearch=true, only the loaded options will be applied search logic. 如果使用搜索功能，将只从已加载数据的label属性进行关键字匹配。
• Option disabled: Specify the disabled field of an option as true to disable the option.
• Controlled: Control the selected value.
• Size: There are four sizes available: mini, small, default and large. Their heights are 24px, 28px, 32px, 36px.
• Customize option: Customize option node.
• Customize footer: Custom rendering the footer of each level menu 。
• Show empty list: If you want to display the next level menu when an option's children is [], please specify showEmptyChildren=true.
• Visibility of dropdown: Use popupVisible and onVisibleChange to control the visibility of the dropdown. More examples can be found in Trigger.
• DropdownRender: Customize the popup content by dropdownRender
• Custom field names.: Custom field name for label, value, isLeaf, disabled and children.
• onSearch: Customize the search logic by onSearch. Whether to display all options in the search panel can be controlled via the showSearch.panelMode property.
• Draggable: In multiple mode, specify the dragToSort property to allow sort the entered values by dragging.

Examples come from the official Arco Design repository (MIT) at the commit published as npm 2.66.18. Some use online images or upload endpoints; network requests are disabled in previews.

API

Cascader

extraOptions

export interface extraOptions {
  checked: boolean;
}

FieldNamesType

/**
 * fieldnames 属性类型
 */
export type FieldNamesType = {
  /* Custom field name for label */
  label?: string;
  /** Custom field name for value */
  value?: string;
  /** Custom field name for children */
  children?: string;
  /** Custom field name for disabled  */
  disabled?: string;
  /** Custom field name for isLeaf */
  isLeaf?: string;
};

OptionProps

export interface OptionProps {
  /**
   * @zh 选项的值
   * @en: the value of Option
   *
   */
  value?: string;
  /**
   * @zh 选项文本
   * @en option text
   */
  label?: string;
  /**
   * @zh 是否禁用该选项
   * @en whether to disabled
   */
  disabled?: boolean;
  /**
   * @zh 下一级选项
   * @en next level menu
   */
  children?: OptionProps[];
  /**
   * @zh 是否是叶子节点
   * @en Flag whether it is a leaf node
   */
  isLeaf?: boolean;
  /**
   * @zh 是否禁用复选框选中
   * @en Whether to disable the check box is selected
   * @version 2.21.0
   */
  disableCheckbox?: boolean;
  /**
   * @zh 其他字段
   * @en other fields
   */
  [key: string]: any;
}

InputValueChangeReason

// 造成输入框值改变的原因：用户输入、选项下拉框收起、其他
export type InputValueChangeReason =
  | "manual"
  | "optionListHide"
  | "optionChecked";

ObjectValueType

export type ObjectValueType = {
  value?: any;
  label?: ReactNode;
  closable?: boolean;
};

Methods

Demo

<Cascader ref={(ref) => (this.select = ref)} />;

this.select.focus();
this.select.blur();