RadioField (Radio) - DingTalk Help Center

When to Use

Radio buttons let users select a single option from a data set. Use them when users need to see all available options side by side and make an exclusive selection.
When there are too many options, consider using a dropdown list instead, which takes less space than displaying every option.

Component Example

Component Properties

Attribute	Description	Type	Default
`behavior`	Display state of the form component	Behavior	`'NORMAL'`
`customRender`	Custom render function	`(item: DataSource) => ReactNode`	-
`dataSource`	Available options	DataSource[]	`[ { "text": "Option 1", "value": "1" }, { "text": "Option 2", "value": "2" }, { "text": "Option 3", "value": "3" } ]`
`iconPosition`	Icon position on mobile (mobile only)	`'left' \| 'right'`	`'left'`
`itemDirection`	Option layout direction on PC	`'hoz' \| 'ver'`	`'hoz'`
`label`	Title of the form component	`string`	-
`labelAlign`	Position of the form component title	`'left' \| 'top'`	`'top'`
`labelColOffset`	Offset of the title, in grid units where 1 represents 1/24	`number`	`0`
`labelColSpan`	Width occupied by the title, in grid units where 1 represents 1/24	`number`	`4`
`labelTextAlign`	Alignment of the form component title	`'left' \| 'right'`	`'right'`
`labelTipsIcon`	Entry icon for the title tooltip. Takes effect when `labelTipsTypes` is set to text or render	`string`	-
`labelTipsRender`	Custom render method for the title tooltip. Takes effect when `labelTipsTypes` is set to render	`(props: IComponentProps) => ReactNode`	-
`labelTipsText`	Tooltip text for the title. Takes effect when `labelTipsTypes` is set to text	`string`	-
`labelTipsTypes`	Tooltip type for the form component title	LabelTipsTypes	`'none'`
`onChange`	Event triggered when the component value changes	`(value: string) => void`	-
`shape`	Display shape	`'default' \| 'button'`	`'default'`
`size`	Size of the form component	Size	`'medium'`
`supportInverse`	Whether clicking the selected option again deselects it	`boolean`	`false`
`tips`	Description text for the form component, displayed below the control	`string`	-
`useDrawerInMobile`	Layout on mobile. When `true`, options open in a bottom drawer; when `false`, options are displayed inline	`boolean`	`false`
`validation`	Validation settings for the form component. For details, see the form validation documentation	Validation[]	`[]`
`value`	Default value	`string`	`'Option 1'`
`wrapperColOffset`	Offset of the form component, in grid units where 1 represents 1/24	`number`	`0`
`wrapperColSpan`	Width occupied by the form component, in grid units where 1 represents 1/24	`number`	`0`