Radio
In a set of related and mutually exclusive data, the user can only select one option.
Install
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 | - |