RadioField Radio Selection

When to Use

• Radio buttons allow users to select a single option from a data set. Designed for scenarios where users need to see all available options side by side and perform exclusive selection with radio buttons.
• For scenarios with too many options, consider using dropdown lists, which take up less space compared to displaying all options.

Component Example

Component Properties

属性	说明	类型	默认值
behavior	表单组件显示状态	Behavior	'NORMAL'
customRender	Custom rendering	(item: DataSource) => ReactNode	-
dataSource	Options	DataSource[]	[ { "text": "Option 1", "value": "1" }, { "text": "Option 2", "value": "2" }, { "text": "Option 3", "value": "3" } ]
iconPosition	Mobile Icon position, only effective on mobile	'left' | 'right'	'left'
itemDirection	PC option arrangement method	'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	Component value change event	(value: string) => void	-
shape	Display shape	'default' | 'button'	'default'
size	表单组件尺寸	Size	'medium'
supportInverse	Whether to support inverse selection, clicking the option again cancels the selection	boolean	false
tips	表单组件描述信息，展示在控件下方	string	-
useDrawerInMobile	Mobile arrangement method, when true then directly tiled, when false then bottom popup layer	boolean	false
validation	表单组件校验设置，具体使用详见表单校验文档	Validation[]	[]
value	Default value	string	'Option 1'
wrapperColOffset	设置表单组件的偏移位置，设置值为栅格值，1代表1/24	number	0
wrapperColSpan	设置表单组件的占位宽度，设置值为栅格值，1代表1/24	number	0