When To Use
- Used to select a single state from multiple options.
- The difference from Select is that Radio is visible to the user and can facilitate the comparison of choice, which means there shouldn’t be too many of them.
Examples
Basic
import React from 'react';
import { Radio } from 'antd';
const App: React.FC = () => <Radio>Radio</Radio>;
export default App;
disabled
import React, { useState } from 'react';
import { Button, Radio } from 'antd';
const App: React.FC = () => {
const [disabled, setDisabled] = useState(true);
const toggleDisabled = () => {
setDisabled(!disabled);
};
return (
<>
<Radio defaultChecked={false} disabled={disabled}>
Disabled
</Radio>
<Radio defaultChecked disabled={disabled}>
Disabled
</Radio>
<br />
<Button type="primary" onClick={toggleDisabled} style={{ marginTop: 16 }}>
Toggle disabled
</Button>
</>
);
};
export default App;
Radio Group
import React, { useState } from 'react';
import type { RadioChangeEvent } from 'antd';
import { Radio } from 'antd';
const App: React.FC = () => {
const [value, setValue] = useState(1);
const onChange = (e: RadioChangeEvent) => {
console.log('radio checked', e.target.value);
setValue(e.target.value);
};
return (
<Radio.Group onChange={onChange} value={value}>
<Radio value={1}>A</Radio>
<Radio value={2}>B</Radio>
<Radio value={3}>C</Radio>
<Radio value={4}>D</Radio>
</Radio.Group>
);
};
export default App;
Vertical Radio.Group
import React, { useState } from 'react';
import type { RadioChangeEvent } from 'antd';
import { Input, Radio, Space } from 'antd';
const App: React.FC = () => {
const [value, setValue] = useState(1);
const onChange = (e: RadioChangeEvent) => {
console.log('radio checked', e.target.value);
setValue(e.target.value);
};
return (
<Radio.Group onChange={onChange} value={value}>
<Space direction="vertical">
<Radio value={1}>Option A</Radio>
<Radio value={2}>Option B</Radio>
<Radio value={3}>Option C</Radio>
<Radio value={4}>
More...
{value === 4 ? <Input style={{ width: 100, marginInlineStart: 10 }} /> : null}
</Radio>
</Space>
</Radio.Group>
);
};
export default App;
Block Radio.Group
import React from 'react';
import { Flex, Radio } from 'antd';
const options = [
{ label: 'Apple', value: 'Apple' },
{ label: 'Pear', value: 'Pear' },
{ label: 'Orange', value: 'Orange' },
];
const App: React.FC = () => (
<Flex vertical gap="middle">
<Radio.Group block options={options} defaultValue="Apple" />
<Radio.Group
block
options={options}
defaultValue="Apple"
optionType="button"
buttonStyle="solid"
/>
<Radio.Group block options={options} defaultValue="Pear" optionType="button" />
</Flex>
);
export default App;
Radio.Group group - optional
import React, { useState } from 'react';
import type { RadioChangeEvent } from 'antd';
import { Radio } from 'antd';
const plainOptions = ['Apple', 'Pear', 'Orange'];
const options = [
{ label: 'Apple', value: 'Apple' },
{ label: 'Pear', value: 'Pear' },
{ label: 'Orange', value: 'Orange', title: 'Orange' },
];
const optionsWithDisabled = [
{ label: 'Apple', value: 'Apple' },
{ label: 'Pear', value: 'Pear' },
{ label: 'Orange', value: 'Orange', disabled: true },
];
const App: React.FC = () => {
const [value1, setValue1] = useState('Apple');
const [value2, setValue2] = useState('Apple');
const [value3, setValue3] = useState('Apple');
const [value4, setValue4] = useState('Apple');
const onChange1 = ({ target: { value } }: RadioChangeEvent) => {
console.log('radio1 checked', value);
setValue1(value);
};
const onChange2 = ({ target: { value } }: RadioChangeEvent) => {
console.log('radio2 checked', value);
setValue2(value);
};
const onChange3 = ({ target: { value } }: RadioChangeEvent) => {
console.log('radio3 checked', value);
setValue3(value);
};
const onChange4 = ({ target: { value } }: RadioChangeEvent) => {
console.log('radio4 checked', value);
setValue4(value);
};
return (
<>
<Radio.Group options={plainOptions} onChange={onChange1} value={value1} />
<br />
<Radio.Group options={optionsWithDisabled} onChange={onChange2} value={value2} />
<br />
<br />
<Radio.Group options={options} onChange={onChange3} value={value3} optionType="button" />
<br />
<br />
<Radio.Group
options={optionsWithDisabled}
onChange={onChange4}
value={value4}
optionType="button"
buttonStyle="solid"
/>
</>
);
};
export default App;
radio style
import React from 'react';
import type { RadioChangeEvent } from 'antd';
import { Flex, Radio } from 'antd';
const onChange = (e: RadioChangeEvent) => {
console.log(`radio checked:${e.target.value}`);
};
const App: React.FC = () => (
<Flex vertical gap="middle">
<Radio.Group onChange={onChange} defaultValue="a">
<Radio.Button value="a">Hangzhou</Radio.Button>
<Radio.Button value="b">Shanghai</Radio.Button>
<Radio.Button value="c">Beijing</Radio.Button>
<Radio.Button value="d">Chengdu</Radio.Button>
</Radio.Group>
<Radio.Group onChange={onChange} defaultValue="a">
<Radio.Button value="a">Hangzhou</Radio.Button>
<Radio.Button value="b" disabled>
Shanghai
</Radio.Button>
<Radio.Button value="c">Beijing</Radio.Button>
<Radio.Button value="d">Chengdu</Radio.Button>
</Radio.Group>
<Radio.Group disabled onChange={onChange} defaultValue="a">
<Radio.Button value="a">Hangzhou</Radio.Button>
<Radio.Button value="b">Shanghai</Radio.Button>
<Radio.Button value="c">Beijing</Radio.Button>
<Radio.Button value="d">Chengdu</Radio.Button>
</Radio.Group>
</Flex>
);
export default App;
Radio.Group with name
import React from 'react';
import { Radio } from 'antd';
const App: React.FC = () => (
<Radio.Group name="radiogroup" defaultValue={1}>
<Radio value={1}>A</Radio>
<Radio value={2}>B</Radio>
<Radio value={3}>C</Radio>
<Radio value={4}>D</Radio>
</Radio.Group>
);
export default App;
Size
import React from 'react';
import { Flex, Radio } from 'antd';
const App: React.FC = () => (
<Flex vertical gap="middle">
<Radio.Group defaultValue="a" size="large">
<Radio.Button value="a">Hangzhou</Radio.Button>
<Radio.Button value="b">Shanghai</Radio.Button>
<Radio.Button value="c">Beijing</Radio.Button>
<Radio.Button value="d">Chengdu</Radio.Button>
</Radio.Group>
<Radio.Group defaultValue="a">
<Radio.Button value="a">Hangzhou</Radio.Button>
<Radio.Button value="b">Shanghai</Radio.Button>
<Radio.Button value="c">Beijing</Radio.Button>
<Radio.Button value="d">Chengdu</Radio.Button>
</Radio.Group>
<Radio.Group defaultValue="a" size="small">
<Radio.Button value="a">Hangzhou</Radio.Button>
<Radio.Button value="b">Shanghai</Radio.Button>
<Radio.Button value="c">Beijing</Radio.Button>
<Radio.Button value="d">Chengdu</Radio.Button>
</Radio.Group>
</Flex>
);
export default App;
Solid radio button
import React from 'react';
import { Flex, Radio } from 'antd';
const App: React.FC = () => (
<Flex vertical gap="middle">
<Radio.Group defaultValue="a" buttonStyle="solid">
<Radio.Button value="a">Hangzhou</Radio.Button>
<Radio.Button value="b">Shanghai</Radio.Button>
<Radio.Button value="c">Beijing</Radio.Button>
<Radio.Button value="d">Chengdu</Radio.Button>
</Radio.Group>
<Radio.Group defaultValue="c" buttonStyle="solid">
<Radio.Button value="a">Hangzhou</Radio.Button>
<Radio.Button value="b" disabled>
Shanghai
</Radio.Button>
<Radio.Button value="c">Beijing</Radio.Button>
<Radio.Button value="d">Chengdu</Radio.Button>
</Radio.Group>
</Flex>
);
export default App;
Badge style
import React from 'react';
import { Badge, Radio } from 'antd';
const App: React.FC = () => (
<Radio.Group buttonStyle="solid">
<Badge count={1}>
<Radio.Button value={1}>Click Me</Radio.Button>
</Badge>
<Badge count={2}>
<Radio.Button value={2}>Not Me</Radio.Button>
</Badge>
</Radio.Group>
);
export default App;
Wireframe
import React from 'react';
import { ConfigProvider, Radio } from 'antd';
const App: React.FC = () => (
<ConfigProvider theme={{ token: { wireframe: true } }}>
<Radio.Group value={1}>
<Radio value={1}>A</Radio>
<Radio value={2}>B</Radio>
<Radio value={3}>C</Radio>
<Radio value={4}>D</Radio>
</Radio.Group>
<br />
<Radio.Group value={1} disabled>
<Radio value={1}>A</Radio>
<Radio value={2}>B</Radio>
<Radio value={3}>C</Radio>
<Radio value={4}>D</Radio>
</Radio.Group>
</ConfigProvider>
);
export default App;
Component Token
import React from 'react';
import { ConfigProvider, Radio, Space } from 'antd';
const App: React.FC = () => (
<ConfigProvider
theme={{
components: {
Radio: {
radioSize: 20,
dotSize: 10,
dotColorDisabled: 'grey',
buttonBg: '#f6ffed',
buttonCheckedBg: '#d9f7be',
buttonColor: '#faad14',
buttonPaddingInline: 20,
buttonCheckedBgDisabled: '#fffbe6',
buttonCheckedColorDisabled: '#ffe58f',
buttonSolidCheckedColor: '#ffa39e',
wrapperMarginInlineEnd: 20,
},
},
}}
>
<Space direction="vertical">
<Radio checked>Test</Radio>
<Radio checked disabled>
Disabled
</Radio>
<Radio.Group defaultValue="a">
<Radio.Button value="a">Hangzhou</Radio.Button>
<Radio.Button value="b">Shanghai</Radio.Button>
<Radio.Button value="c">Beijing</Radio.Button>
<Radio.Button value="d">Chengdu</Radio.Button>
</Radio.Group>
<Radio.Group defaultValue="a" disabled>
<Radio.Button value="a">Hangzhou</Radio.Button>
<Radio.Button value="b">Shanghai</Radio.Button>
<Radio.Button value="c">Beijing</Radio.Button>
<Radio.Button value="d">Chengdu</Radio.Button>
</Radio.Group>
<Radio.Group defaultValue="a" buttonStyle="solid">
<Radio.Button value="a">Hangzhou</Radio.Button>
<Radio.Button value="b">Shanghai</Radio.Button>
<Radio.Button value="c">Beijing</Radio.Button>
<Radio.Button value="d">Chengdu</Radio.Button>
</Radio.Group>
</Space>
</ConfigProvider>
);
export default App;
Upload Debug
import React from 'react';
import { Checkbox, Radio, Space, Upload } from 'antd';
const App: React.FC = () => (
<Space>
<Upload>
<Radio>Radio</Radio>
</Upload>
<Upload>
<Checkbox>Checkbox</Checkbox>
</Upload>
</Space>
);
export default App;
API
Common props ref:Common props
Radio/Radio.Button
Property |
Description |
Type |
Default |
autoFocus |
Whether get focus when component mounted |
boolean |
false |
checked |
Specifies whether the radio is selected |
boolean |
false |
defaultChecked |
Specifies the initial state: whether or not the radio is selected |
boolean |
false |
disabled |
Disable radio |
boolean |
false |
value |
According to value for comparison, to determine whether the selected |
any |
- |
RadioGroup
Radio group can wrap a group of Radio
。
Property |
Description |
Type |
Default |
Version |
buttonStyle |
The style type of radio button |
outline | solid |
outline |
|
defaultValue |
Default selected value |
any |
- |
|
disabled |
Disable all radio buttons |
boolean |
false |
|
name |
The name property of all input[type="radio"] children |
string |
- |
|
options |
Set children optional |
string[] | number[] | Array<CheckboxOptionType> |
- |
|
optionType |
Set Radio optionType |
default | button |
default |
4.4.0 |
size |
The size of radio button style |
large | middle | small |
- |
|
value |
Used for setting the currently selected value |
any |
- |
|
block |
Option to fit RadioGroup width to its parent width |
boolean |
false |
5.21.0 |
onChange |
The callback function that is triggered when the state changes |
function(e:Event) |
- |
|
CheckboxOptionType
Property |
Description |
Type |
Default |
Version |
label |
The text used to display as the Radio option |
string |
- |
4.4.0 |
value |
The value associated with the Radio option |
string | number | boolean |
- |
4.4.0 |
style |
The style to apply to the Radio option |
React.CSSProperties |
- |
4.4.0 |
disabled |
Specifies whether the Radio option is disabled |
boolean |
false |
4.4.0 |
title |
Adds the Title attribute value |
string |
- |
4.4.0 |
id |
Adds the Radio Id attribute value |
string |
- |
4.4.0 |
onChange |
Triggered when the value of the Radio Group changes |
(e: CheckboxChangeEvent) => void; |
- |
4.4.0 |
required |
Specifies whether the Radio option is required |
boolean |
false |
4.4.0 |
Methods
Radio
Name |
Description |
blur() |
Remove focus |
focus() |
Get focus |
Design Token