RadioField 单选 - DingTalk Help Center

何时使用

单选框允许用户从一个数据集中选择单个选项。面向用户需要并排看到所有的可选项，并使用单选框进行排他操作的场景。
对于选项过多的场景，考虑使用下拉列表，相对于显示所有的选项占用更少的空间。

组件示例

组件属性

属性	说明	类型	默认值
`behavior`	表单组件显示状态	Behavior	`'NORMAL'`
`customRender`	定制渲染	`(item: DataSource) => ReactNode`	-
`dataSource`	待选项	DataSource[]	`[ { "text": "选项一", "value": "1" }, { "text": "选项二", "value": "2" }, { "text": "选项三", "value": "3" } ]`
`iconPosition`	手机端Icon位置，仅手机端生效	`'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`	`'选项一'`
`wrapperColOffset`	设置表单组件的偏移位置，设置值为栅格值，1代表1/24	`number`	`0`
`wrapperColSpan`	设置表单组件的占位宽度，设置值为栅格值，1代表1/24	`number`	`0`