> ## Documentation Index
> Fetch the complete documentation index at: https://help.dingtalk.io/llms.txt
> Use this file to discover all available pages before exploring further.

# RadioField (Radio)

> Documentation for the RadioField radio component. Learn how to configure options, default values, and layout so users can make exclusive selections from side-by-side choices.

## 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](/open/yida/components/interface#behavior)             | `'NORMAL'`                                                                                                             |
| `customRender`      | Custom render function                                                                                                                | `(item: DataSource) => ReactNode`                                | -                                                                                                                      |
| `dataSource`        | Available options                                                                                                                     | [DataSource\[\]](/open/yida/components/interface#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](/open/yida/components/interface#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](/open/yida/components/interface#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](/open/yida/guide/concept/validation) | [Validation\[\]](/open/yida/components/interface#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`                                                                                                                    |