# Radio

- Page: https://jiguang132.com/resources/arco-design/docs/radio
- Resource: Arco Design (https://jiguang132.com/resources/arco-design.md)
- All guides: https://jiguang132.com/resources/arco-design/docs.md

In a set of related and mutually exclusive data, the user can only select one option.

## Install

```bash
npm install @arco-design/web-react@2.66.18
```

Import `@arco-design/web-react/dist/css/arco.css` at the entry and set the locale with `ConfigProvider`. React 19 projects must also import `@arco-design/web-react/es/_util/react-19-adapter` first, or imperative APIs such as Message and Modal cannot render.

## Examples

- **Basic**: Basic usage.
- **Radio Group**: A group of radio components. It can be generated by children or a options array.
- **Vertical Radio.Group**: If direction is 'vertical', the vertical Radio.Group will be displayed.
- **Radio with icon**: You can display icons in children.
- **Button style**: The combination of radio button style.
- **Size**: The radio group of button type has four sizes available: `mini`, `small`, `default`, `large`.
- **Custom Render Radio**: Render radio nodes can be customized by passing a function of type 'children'.(`2.29.0`)

Examples come from the official Arco Design repository (MIT) at the commit published as npm 2.66.18. Some use online images or upload endpoints; network requests are disabled in previews.

## API

### Radio

|Property|Description|Type|DefaultValue|
|---|---|---|---|
|checked|Whether the radio is checked (Controlled)|boolean |`-`|
|defaultChecked|Whether the radio is initially selected|boolean |`-`|
|disabled|Whether the radio is disabled|boolean |`-`|
|className|Additional css class|string \| string[] |`-`|
|style|Additional style|CSSProperties |`-`|
|value|The value of radio|T |`-`|
|onChange|Callback when radio status change|(checked: boolean, event: ChangeEvent) => void |`-`|

### Radio.Group

|Property|Description|Type|DefaultValue|
|---|---|---|---|
|disabled|disabled|boolean |`-`|
|name|`Radio`'s name attr|string |`-`|
|direction|Arrangement direction|'vertical' \| 'horizontal' |`horizontal`|
|size|The size of radio button style(Only effective under `button` type)|'small' \| 'default' \| 'large' \| 'mini' |`-`|
|type|type of `Radio`|'radio' \| 'button' |`radio`|
|className|Additional css class|string \| string[] |`-`|
|defaultValue|To set default value|any |`-`|
|options|Set children options|(string \| number \| { label: ReactNode; value: any; disabled?: boolean })[] |`-`|
|style|Additional style|CSSProperties |`-`|
|value|To set value|any |`-`|
|onChange|Callback when radio status change|(value: any, event: ChangeEvent) => void |`-`|

---

Index of all JGuang resources: https://jiguang132.com/llms.txt