CheckboxField 複数選択 - DingTalk Help Center

使用シーン

一連の選択肢から複数の項目を選ぶ必要がある場合。
単独で使用する場合は、2 つの状態を切り替えるスイッチのような役割を果たします。ただし、スイッチが切り替えた瞬間に状態変更を発生させるのに対し、チェックボックスは状態のマーキングに使われることが多く、通常は送信アクションと組み合わせて動作します。

コンポーネント例

コンポーネントプロパティ

属性	説明	タイプ	デフォルト
`behavior`	フォームコンポーネントの表示状態	Behavior	`'NORMAL'`
`dataSource`	選択肢の設定	DataSource[]	`[ { "text": "選択肢 1", "value": "1" }, { "text": "選択肢 2", "value": "2" }, { "text": "選択肢 3", "value": "3" } ]`
`iconPosition`	モバイル端末におけるアイコンの位置	`'left' \| 'right'`	`'left'`
`itemDirection`	PC における選択肢のレイアウト方向	`'hoz' \| 'ver'`	`'hoz'`
`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	`'none'`
`onChange`	コンポーネントの値が変更されたときにトリガーされるイベント	`(value: string[]) => void`	-
`size`	フォームコンポーネントのサイズ	Size	`'medium'`
`tips`	フォームコンポーネントの説明。コントロールの下に表示されます。	`string`	-
`useDrawerInMobile`	モバイル端末におけるレイアウトスタイル。true の場合は選択肢がインラインで配置され、false の場合は下部ドロワーが使用されます。	`boolean`	`false`
`validation`	フォームコンポーネントのバリデーション設定。詳細はフォームバリデーションドキュメントを参照してください。	Validation[]	`[]`
`value`	現在のコンポーネントのデフォルト値	`string[]`	-
`wrapperColOffset`	フォームコンポーネントのオフセット位置を設定します。値はグリッドシステムに従い、1 は 1/24 を表します。	`number`	`0`
`wrapperColSpan`	フォームコンポーネントの幅を設定します。値はグリッドシステムに従い、1 は 1/24 を表します。	`number`	`0`