> ## 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 カスケード選択 > CascadeSelectField カスケード選択コンポーネントのドキュメントです。カスケードデータソースと階層を設定し、ポップアップレイヤーで多段階の連動選択を実現します。地域選択などのシーンで頻繁に使用されます。 ## 使用タイミング * カスケード選択はセレクターとカスケードパネルで構成されます。カスケードコンポーネントはポップアップレイヤーとして表示され、主にフォームシーンで使用されます。 ## コンポーネントの例 ## コンポーネントのプロパティ | 属性 | 説明 | タイプ | デフォルト | | ------------------- | ---------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `behavior` | フォームコンポーネントの表示状態 | [Behavior](/ja/open/yida/components/interface#behavior) | `'NORMAL'` | | `columnsNum` | カスケードの階層数 | `number` | `0` | | `dataSource` | データソース | [CascadeDataSource\[\]](/ja/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` | 展開のトリガー動作 | `'click' \| 'hover'` | `click` | | `hasArrow` | ドロップダウン矢印を表示するかどうか | `boolean` | `true` | | `hasBorder` | 枠線を表示するかどうか | `boolean` | `true` | | `hasClear` | クリアボタンを表示するかどうか | `boolean` | `true` | | `isLoadData` | 非同期読み込みを有効にするかどうか | `boolean` | `false` | | `label` | フォームコンポーネントのタイトル | `string` | - | | `labelAlign` | フォームコンポーネントのタイトル位置 | `'left' \| 'top'` | `'top'` | | `labelColOffset` | タイトルのオフセット位置を設定します。値はグリッド単位で、1 は 1/24 を表します | `number` | `0` | | `labelColSpan` | タイトルの占有幅を設定します。値はグリッド単位で、1 は 1/24 を表します | `number` | `4` | | `labelTextAlign` | フォームコンポーネントのタイトルの配置 | `'left' \| 'right'` | `'right'` | | `labelTipsIcon` | フォームコンポーネントのタイトルのお知らせ用アイコン。labelTipsTypes が **text** または **render** に設定されている場合に有効です | `string` | - | | `labelTipsRender` | フォームコンポーネントのタイトルのお知らせのカスタムレンダリング関数。labelTipsTypes が **render** に設定されている場合に有効です | `(props: IComponentProps) => ReactNode` | - | | `labelTipsText` | フォームコンポーネントのタイトルのお知らせテキスト。labelTipsTypes が **text** に設定されている場合に有効です | `string` | - | | `labelTipsTypes` | フォームコンポーネントのタイトルのお知らせタイプ設定 | [LabelTipsTypes](/ja/open/yida/components/interface#labeltipstypes) | `'none'` | | `listStyle` | リストのスタイル | `React.CSSProperties` | `{}` | | `loadData` | loadData 関数 | `( node: object ) => Promise` | - | | `notFoundContent` | データがない場合に表示するコンテンツ | `string` | `'No data'` | | `onChange` | 値が変更されたときにトリガー | `({ value: string \| array, data: object \| array , extra: object }) => void` | - | | `onVisibleChange` | ポップアップレイヤーの表示状態が変更されたときにトリガー | `( visible : boolean ) => void` | - | | `optionAutoWidth` | オプションの自動幅を有効にするかどうか。PC のみサポート | `boolean` | `false` | | `placeholder` | プレースホルダーのお知らせテキスト | `string` | `'Please select'` | | `showSearch` | 検索ボックスを表示するかどうか | `boolean` | `false` | | `size` | フォームコンポーネントのサイズ | [Size](/ja/open/yida/components/interface#size) | `'medium'` | | `tips` | フォームコンポーネントの説明。コントロールの下に表示されます | `string` | - | | `validation` | フォームコンポーネントのバリデーション設定。詳細は[フォームバリデーションのドキュメント](/ja/open/yida/guide/concept/validation)を参照してください | [Validation\[\]](/ja/open/yida/components/interface#validation) | `[]` | | `value` | データソース内の最後のノードの値 | `string` | `'part_b'` | | `wrapperColOffset` | フォームコンポーネントのオフセット位置を設定します。値はグリッド単位で、1 は 1/24 を表します | `number` | `0` | | `wrapperColSpan` | フォームコンポーネントの占有幅を設定します。値はグリッド単位で、1 は 1/24 を表します | `number` | `0` |