RadioField（ラジオボタン） - DingTalk Help Center

使用シーン

ラジオボタンは、データセットからユーザーに 1 つの選択肢を選ばせるためのコンポーネントです。すべての選択肢を横並びで表示し、排他的に 1 つを選択させたい場合に使用します。
選択肢が多い場合は、代わりにドロップダウンリストの利用を検討してください。すべての選択肢を表示するよりも省スペースです。

コンポーネントの例

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

属性	説明	タイプ	デフォルト
`behavior`	フォームコンポーネントの表示状態	Behavior	`'NORMAL'`
`customRender`	カスタムレンダー関数	`(item: DataSource) => ReactNode`	-
`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`	-
`shape`	表示形状	`'default' \| 'button'`	`'default'`
`size`	フォームコンポーネントのサイズ	Size	`'medium'`
`supportInverse`	選択済みの選択肢を再度クリックして選択解除できるかどうか	`boolean`	`false`
`tips`	フォームコンポーネントの説明テキスト。コントロールの下に表示	`string`	-
`useDrawerInMobile`	モバイルでのレイアウト。`true` の場合はインラインで選択肢を表示し、`false` の場合はボトムドロワーで開きます	`boolean`	`false`
`validation`	フォームコンポーネントのバリデーション設定。詳細はフォームバリデーションのドキュメントを参照	Validation[]	`[]`
`value`	デフォルト値	`string`	`'選択肢 1'`
`wrapperColOffset`	フォームコンポーネントのオフセット位置。グリッド単位で 1 は 1/24 を表します	`number`	`0`
`wrapperColSpan`	フォームコンポーネントの占有幅。グリッド単位で 1 は 1/24 を表します	`number`	`0`