Radio.
import React from 'react';
import { Radio } from 'antd';
const App: React.FC = () => <Radio>Radio</Radio>;
export default App;
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;
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' },
];
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;
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;
import React from 'react';
import { Radio } from 'antd';
const App: React.FC = () => (
<>
<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" style={{ marginTop: 16 }}>
<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>
</>
);
export default App;
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;
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, marginLeft: 10 }} /> : null}
</Radio>
</Space>
</Radio.Group>
);
};
export default App;
import React from 'react';
import type { RadioChangeEvent } from 'antd';
import { Radio } from 'antd';
const onChange = (e: RadioChangeEvent) => {
console.log(`radio checked:${e.target.value}`);
};
const App: React.FC = () => (
<>
<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" style={{ marginTop: 16 }}>
<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" style={{ marginTop: 16 }}>
<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>
</>
);
export default App;
import React from 'react';
import { Radio } from 'antd';
const App: React.FC = () => (
<>
<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" style={{ marginTop: 16 }}>
<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" style={{ marginTop: 16 }}>
<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>
</>
);
export default App;
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 | - |
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<{ label: ReactNode; value: string; disabled?: boolean; }> | - | |
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 | - | |
onChange | The callback function that is triggered when the state changes | function(e:Event) | - |
Name | Description |
---|---|
blur() | Remove focus |
focus() | Get focus |