> ## 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

> Panduan komponen CascadeSelectField (Cascade Select) di YiDA — konfigurasikan Sumber Data bertingkat dan Tier untuk pemilihan multi-level via popup, ideal untuk skenario pemilihan Wilayah.

## Kapan digunakan

* Cascade Select terdiri atas selektor dan panel bertingkat. Komponen bertingkat disembunyikan sebagai lapisan popup dan umumnya digunakan pada skenario Formulir.

## Contoh komponen

## Properti komponen

| Atribut             | Deskripsi                                                                                                                                | Tipe                                                                          | Default                                                                                                                                                                                                                                                                                                                                                     |
| ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `behavior`          | Status tampilan komponen formulir                                                                                                        | [Behavior](/id/open/yida/components/interface#behavior)                       | `'NORMAL'`                                                                                                                                                                                                                                                                                                                                                  |
| `columnsNum`        | Tier bertingkat                                                                                                                          | `number`                                                                      | `0`                                                                                                                                                                                                                                                                                                                                                         |
| `dataSource`        | Sumber Data                                                                                                                              | [CascadeDataSource\[\]](/id/open/yida/components/interface#cascadedatasource) | `[{ "value": "part", "label": { "type": "i18n", "en_US": "dep", "zh_CN": "部门" }, "children": [{ "value": "part_a", "label": "Departemen A" }, { "value": "part_b", "label": "Departemen B" } ] }, { "value": "product", "label": "Produk", "children": [{ "value": "product_a", "label": "Produk A" }, { "value": "product_b", "label": "Produk B" } ] } ]` |
| `expandTriggerType` | Perilaku pemicu                                                                                                                          | `'click' \| 'hover'`                                                          | `click`                                                                                                                                                                                                                                                                                                                                                     |
| `hasArrow`          | Menampilkan panah dropdown atau tidak                                                                                                    | `boolean`                                                                     | `true`                                                                                                                                                                                                                                                                                                                                                      |
| `hasBorder`         | Menampilkan border atau tidak                                                                                                            | `boolean`                                                                     | `true`                                                                                                                                                                                                                                                                                                                                                      |
| `hasClear`          | Menampilkan tombol hapus atau tidak                                                                                                      | `boolean`                                                                     | `true`                                                                                                                                                                                                                                                                                                                                                      |
| `isLoadData`        | Mengaktifkan pemuatan asinkron atau tidak                                                                                                | `boolean`                                                                     | `false`                                                                                                                                                                                                                                                                                                                                                     |
| `label`             | Judul komponen formulir                                                                                                                  | `string`                                                                      | -                                                                                                                                                                                                                                                                                                                                                           |
| `labelAlign`        | Lokasi Judul komponen formulir                                                                                                           | `'left' \| 'top'`                                                             | `'top'`                                                                                                                                                                                                                                                                                                                                                     |
| `labelColOffset`    | Atur posisi offset Judul. Nilai berupa unit kisi, dengan 1 mewakili 1/24                                                                 | `number`                                                                      | `0`                                                                                                                                                                                                                                                                                                                                                         |
| `labelColSpan`      | Atur lebar placeholder Judul. Nilai berupa unit kisi, dengan 1 mewakili 1/24                                                             | `number`                                                                      | `4`                                                                                                                                                                                                                                                                                                                                                         |
| `labelTextAlign`    | Perataan Judul komponen formulir                                                                                                         | `'left' \| 'right'`                                                           | `'right'`                                                                                                                                                                                                                                                                                                                                                   |
| `labelTipsIcon`     | Ikon entri untuk Tips Judul komponen formulir. Berlaku ketika labelTipsTypes diatur ke **text** atau **render**                          | `string`                                                                      | -                                                                                                                                                                                                                                                                                                                                                           |
| `labelTipsRender`   | Metode render kustom untuk Tips Judul komponen formulir. Berlaku ketika labelTipsTypes diatur ke **render**                              | `(props: IComponentProps) => ReactNode`                                       | -                                                                                                                                                                                                                                                                                                                                                           |
| `labelTipsText`     | Teks Tips untuk Judul komponen formulir. Berlaku ketika labelTipsTypes diatur ke **text**                                                | `string`                                                                      | -                                                                                                                                                                                                                                                                                                                                                           |
| `labelTipsTypes`    | Pengaturan tipe Tips untuk Judul komponen formulir                                                                                       | [LabelTipsTypes](/id/open/yida/components/interface#labeltipstypes)           | `'none'`                                                                                                                                                                                                                                                                                                                                                    |
| `listStyle`         | Gaya daftar                                                                                                                              | `React.CSSProperties`                                                         | `{}`                                                                                                                                                                                                                                                                                                                                                        |
| `loadData`          | Fungsi loadData                                                                                                                          | `( node: object ) => Promise<CascadeDataSource[]>`                            | -                                                                                                                                                                                                                                                                                                                                                           |
| `notFoundContent`   | Konten yang ditampilkan ketika tidak ada Data                                                                                            | `string`                                                                      | `'No data'`                                                                                                                                                                                                                                                                                                                                                 |
| `onChange`          | Dipicu ketika nilai berubah                                                                                                              | `({ value: string \| array, data: object \| array , extra: object }) => void` | -                                                                                                                                                                                                                                                                                                                                                           |
| `onVisibleChange`   | Dipicu ketika visibilitas lapisan popup berubah                                                                                          | `( visible : boolean ) => void`                                               | -                                                                                                                                                                                                                                                                                                                                                           |
| `optionAutoWidth`   | Mengaktifkan lebar otomatis untuk opsi atau tidak. Hanya didukung di PC                                                                  | `boolean`                                                                     | `false`                                                                                                                                                                                                                                                                                                                                                     |
| `placeholder`       | Tips placeholder                                                                                                                         | `string`                                                                      | `'Please select'`                                                                                                                                                                                                                                                                                                                                           |
| `showSearch`        | Menampilkan kotak Cari atau tidak                                                                                                        | `boolean`                                                                     | `false`                                                                                                                                                                                                                                                                                                                                                     |
| `size`              | Ukuran komponen formulir                                                                                                                 | [Size](/id/open/yida/components/interface#size)                               | `'medium'`                                                                                                                                                                                                                                                                                                                                                  |
| `tips`              | Deskripsi komponen formulir, ditampilkan di bawah kontrol                                                                                | `string`                                                                      | -                                                                                                                                                                                                                                                                                                                                                           |
| `validation`        | Pengaturan validasi untuk komponen formulir. Untuk detail, lihat [dokumentasi validasi formulir](/id/open/yida/guide/concept/validation) | [Validation\[\]](/id/open/yida/components/interface#validation)               | `[]`                                                                                                                                                                                                                                                                                                                                                        |
| `value`             | Nilai node terakhir pada Sumber Data                                                                                                     | `string`                                                                      | `'part_b'`                                                                                                                                                                                                                                                                                                                                                  |
| `wrapperColOffset`  | Atur posisi offset komponen formulir. Nilai berupa unit kisi, dengan 1 mewakili 1/24                                                     | `number`                                                                      | `0`                                                                                                                                                                                                                                                                                                                                                         |
| `wrapperColSpan`    | Atur lebar placeholder komponen formulir. Nilai berupa unit kisi, dengan 1 mewakili 1/24                                                 | `number`                                                                      | `0`                                                                                                                                                                                                                                                                                                                                                         |