> ## Documentation Index
> Fetch the complete documentation index at: https://help.dingtalk.io/llms.txt
> Use this file to discover all available pages before exploring further.

# CascadeSelectField Cascade Select

> Documentation for the CascadeSelectField cascade select component. Introduces cascade Data Sources and Tier configuration to complete multi-level linked selection through a popup layer, commonly used in scenarios such as Region selection.

## When to Use

* Cascade Select consists of a selector and a cascade panel. The cascade Component is hidden as a popup layer and is typically used in Form scenarios.

## Component Example

## Component Properties

| Attribute           | Description                                                                                                                           | Type                                                                          | Default                                                                                                                                                                                                                                                                                                                                                        |
| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `behavior`          | Display state of the form Component                                                                                                   | [Behavior](/open/yida/components/interface#behavior)                          | `'NORMAL'`                                                                                                                                                                                                                                                                                                                                                     |
| `columnsNum`        | Cascade Tier                                                                                                                          | `number`                                                                      | `0`                                                                                                                                                                                                                                                                                                                                                            |
| `dataSource`        | Data Source                                                                                                                           | [CascadeDataSource\[\]](/open/yida/components/interface#cascadedatasource)    | `[{ "value": "part", "label": { "type": "i18n", "en_US": "dep", "zh_CN": "部门" }, "children": [{ "value": "part_a", "label": "Department A" }, { "value": "part_b", "label": "Department B" } ] }, { "value": "product", "label": "Product", "children": [{ "value": "product_a", "label": "Product A" }, { "value": "product_b", "label": "Product B" } ] } ]` |
| `expandTriggerType` | Trigger behavior                                                                                                                      | `'click' \| 'hover'`                                                          | `click`                                                                                                                                                                                                                                                                                                                                                        |
| `hasArrow`          | Whether to display the dropdown arrow                                                                                                 | `boolean`                                                                     | `true`                                                                                                                                                                                                                                                                                                                                                         |
| `hasBorder`         | Whether to display the border                                                                                                         | `boolean`                                                                     | `true`                                                                                                                                                                                                                                                                                                                                                         |
| `hasClear`          | Whether to display the clear Button                                                                                                   | `boolean`                                                                     | `true`                                                                                                                                                                                                                                                                                                                                                         |
| `isLoadData`        | Whether to enable asynchronous loading                                                                                                | `boolean`                                                                     | `false`                                                                                                                                                                                                                                                                                                                                                        |
| `label`             | Title of the form Component                                                                                                           | `string`                                                                      | -                                                                                                                                                                                                                                                                                                                                                              |
| `labelAlign`        | Location of the form Component Title                                                                                                  | `'left' \| 'top'`                                                             | `'top'`                                                                                                                                                                                                                                                                                                                                                        |
| `labelColOffset`    | Sets the offset position of the Title. The value is in grid units, where 1 represents 1/24                                            | `number`                                                                      | `0`                                                                                                                                                                                                                                                                                                                                                            |
| `labelColSpan`      | Sets the placeholder width of the Title. The value is in grid units, where 1 represents 1/24                                          | `number`                                                                      | `4`                                                                                                                                                                                                                                                                                                                                                            |
| `labelTextAlign`    | Alignment of the form Component Title                                                                                                 | `'left' \| 'right'`                                                           | `'right'`                                                                                                                                                                                                                                                                                                                                                      |
| `labelTipsIcon`     | Entry icon for the form Component Title tip. Takes effect when labelTipsTypes is set to **text** or **render**                        | `string`                                                                      | -                                                                                                                                                                                                                                                                                                                                                              |
| `labelTipsRender`   | Custom render method for the form Component Title tip. Takes effect when labelTipsTypes is set to **render**                          | `(props: IComponentProps) => ReactNode`                                       | -                                                                                                                                                                                                                                                                                                                                                              |
| `labelTipsText`     | Tips text for the form Component Title. Takes effect when labelTipsTypes is set to **text**                                           | `string`                                                                      | -                                                                                                                                                                                                                                                                                                                                                              |
| `labelTipsTypes`    | Tips type setting for the form Component Title                                                                                        | [LabelTipsTypes](/open/yida/components/interface#labeltipstypes)              | `'none'`                                                                                                                                                                                                                                                                                                                                                       |
| `listStyle`         | List style                                                                                                                            | `React.CSSProperties`                                                         | `{}`                                                                                                                                                                                                                                                                                                                                                           |
| `loadData`          | loadData Function                                                                                                                     | `( node: object ) => Promise<CascadeDataSource[]>`                            | -                                                                                                                                                                                                                                                                                                                                                              |
| `notFoundContent`   | Content displayed when no Data is available                                                                                           | `string`                                                                      | `'No data'`                                                                                                                                                                                                                                                                                                                                                    |
| `onChange`          | Triggered when the value changes                                                                                                      | `({ value: string \| array, data: object \| array , extra: object }) => void` | -                                                                                                                                                                                                                                                                                                                                                              |
| `onVisibleChange`   | Triggered when the popup layer visibility changes                                                                                     | `( visible : boolean ) => void`                                               | -                                                                                                                                                                                                                                                                                                                                                              |
| `optionAutoWidth`   | Whether to enable auto width for options. Supported on PC only                                                                        | `boolean`                                                                     | `false`                                                                                                                                                                                                                                                                                                                                                        |
| `placeholder`       | Placeholder Tips                                                                                                                      | `string`                                                                      | `'Please select'`                                                                                                                                                                                                                                                                                                                                              |
| `showSearch`        | Whether to display the Search box                                                                                                     | `boolean`                                                                     | `false`                                                                                                                                                                                                                                                                                                                                                        |
| `size`              | Size of the form Component                                                                                                            | [Size](/open/yida/components/interface#size)                                  | `'medium'`                                                                                                                                                                                                                                                                                                                                                     |
| `tips`              | Description of the form Component, displayed below the control                                                                        | `string`                                                                      | -                                                                                                                                                                                                                                                                                                                                                              |
| `validation`        | Validation settings for the form Component. For details, see the [form validation documentation](/open/yida/guide/concept/validation) | [Validation\[\]](/open/yida/components/interface#validation)                  | `[]`                                                                                                                                                                                                                                                                                                                                                           |
| `value`             | Value of the last node in the Data Source                                                                                             | `string`                                                                      | `'part_b'`                                                                                                                                                                                                                                                                                                                                                     |
| `wrapperColOffset`  | Sets the offset position of the form Component. The value is in grid units, where 1 represents 1/24                                   | `number`                                                                      | `0`                                                                                                                                                                                                                                                                                                                                                            |
| `wrapperColSpan`    | Sets the placeholder width of the form Component. The value is in grid units, where 1 represents 1/24                                 | `number`                                                                      | `0`                                                                                                                                                                                                                                                                                                                                                            |