Radio
Radio.
When To Use#
Used to select a single state in multiple options.
The difference between Select is that Radio is visible to user and can facilitate the comparison of choice. So, when you want to use Radio, option should not be too much.
Examples
import { Radio } from 'antd';
ReactDOM.render(<Radio>Radio</Radio>, mountNode);
import { Radio } from 'antd';
const RadioGroup = Radio.Group;
class App extends React.Component {
state = {
value: 1,
}
onChange = (e) => {
console.log('radio checked', e.target.value);
this.setState({
value: e.target.value,
});
}
render() {
return (
<RadioGroup onChange={this.onChange} value={this.state.value}>
<Radio value={1}>A</Radio>
<Radio value={2}>B</Radio>
<Radio value={3}>C</Radio>
<Radio value={4}>D</Radio>
</RadioGroup>
);
}
}
ReactDOM.render(<App />, mountNode);
import { Radio } from 'antd';
const RadioGroup = Radio.Group;
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: false },
];
class App extends React.Component {
state = {
value1: 'Apple',
value2: 'Apple',
value3: 'Apple',
}
onChange1 = (e) => {
console.log('radio1 checked', e.target.value);
this.setState({
value1: e.target.value,
});
}
onChange2 = (e) => {
console.log('radio2 checked', e.target.value);
this.setState({
value2: e.target.value,
});
}
onChange3 = (e) => {
console.log('radio3 checked', e.target.value);
this.setState({
value3: e.target.value,
});
}
render() {
return (
<div>
<RadioGroup options={plainOptions} onChange={this.onChange1} value={this.state.value1} />
<RadioGroup options={options} onChange={this.onChange2} value={this.state.value2} />
<RadioGroup options={optionsWithDisabled} onChange={this.onChange3} value={this.state.value3} />
</div>
);
}
}
ReactDOM.render(<App />, mountNode);
import { Radio } from 'antd';
const RadioGroup = Radio.Group;
function App() {
return (
<RadioGroup name="radiogroup" defaultValue={1}>
<Radio value={1}>A</Radio>
<Radio value={2}>B</Radio>
<Radio value={3}>C</Radio>
<Radio value={4}>D</Radio>
</RadioGroup>
);
}
ReactDOM.render(<App />, mountNode);
import { Radio, Button } from 'antd';
class App extends React.Component {
state = {
disabled: true,
}
toggleDisabled = () => {
this.setState({
disabled: !this.state.disabled,
});
}
render() {
return (
<div>
<Radio defaultChecked={false} disabled={this.state.disabled}>Disabled</Radio>
<br />
<Radio defaultChecked disabled={this.state.disabled}>Disabled</Radio>
<div style={{ marginTop: 20 }}>
<Button type="primary" onClick={this.toggleDisabled}>
Toggle disabled
</Button>
</div>
</div>
);
}
}
ReactDOM.render(<App />, mountNode);
import { Radio, Input } from 'antd';
const RadioGroup = Radio.Group;
class App extends React.Component {
state = {
value: 1,
}
onChange = (e) => {
console.log('radio checked', e.target.value);
this.setState({
value: e.target.value,
});
}
render() {
const radioStyle = {
display: 'block',
height: '30px',
lineHeight: '30px',
};
return (
<RadioGroup onChange={this.onChange} value={this.state.value}>
<Radio style={radioStyle} value={1}>Option A</Radio>
<Radio style={radioStyle} value={2}>Option B</Radio>
<Radio style={radioStyle} value={3}>Option C</Radio>
<Radio style={radioStyle} value={4}>
More...
{this.state.value === 4 ? <Input style={{ width: 100, marginLeft: 10 }} /> : null}
</Radio>
</RadioGroup>
);
}
}
ReactDOM.render(<App />, mountNode);
import { Radio } from 'antd';
const RadioButton = Radio.Button;
const RadioGroup = Radio.Group;
function onChange(e) {
console.log(`radio checked:${e.target.value}`);
}
ReactDOM.render(
<div>
<div>
<RadioGroup onChange={onChange} defaultValue="a">
<RadioButton value="a">Hangzhou</RadioButton>
<RadioButton value="b">Shanghai</RadioButton>
<RadioButton value="c">Beijing</RadioButton>
<RadioButton value="d">Chengdu</RadioButton>
</RadioGroup>
</div>
<div style={{ marginTop: 16 }}>
<RadioGroup onChange={onChange} defaultValue="a">
<RadioButton value="a">Hangzhou</RadioButton>
<RadioButton value="b" disabled>Shanghai</RadioButton>
<RadioButton value="c">Beijing</RadioButton>
<RadioButton value="d">Chengdu</RadioButton>
</RadioGroup>
</div>
<div style={{ marginTop: 16 }}>
<RadioGroup disabled onChange={onChange} defaultValue="a">
<RadioButton value="a">Hangzhou</RadioButton>
<RadioButton value="b">Shanghai</RadioButton>
<RadioButton value="c">Beijing</RadioButton>
<RadioButton value="d">Chengdu</RadioButton>
</RadioGroup>
</div>
</div>
, mountNode);
import { Radio } from 'antd';
const RadioButton = Radio.Button;
const RadioGroup = Radio.Group;
ReactDOM.render(
<div>
<div>
<RadioGroup defaultValue="a" size="large">
<RadioButton value="a">Hangzhou</RadioButton>
<RadioButton value="b">Shanghai</RadioButton>
<RadioButton value="c">Beijing</RadioButton>
<RadioButton value="d">Chengdu</RadioButton>
</RadioGroup>
</div>
<div style={{ marginTop: 16 }}>
<RadioGroup defaultValue="a">
<RadioButton value="a">Hangzhou</RadioButton>
<RadioButton value="b">Shanghai</RadioButton>
<RadioButton value="c">Beijing</RadioButton>
<RadioButton value="d">Chengdu</RadioButton>
</RadioGroup>
</div>
<div style={{ marginTop: 16 }}>
<RadioGroup defaultValue="a" size="small">
<RadioButton value="a">Hangzhou</RadioButton>
<RadioButton value="b">Shanghai</RadioButton>
<RadioButton value="c">Beijing</RadioButton>
<RadioButton value="d">Chengdu</RadioButton>
</RadioGroup>
</div>
</div>
, mountNode);
API#
Radio#
Property | Description | Type | optional | Default |
---|---|---|---|---|
autoFocus | 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 | none |
RadioGroup#
radio group,wrap a group of Radio
。
Property | Description | Type | optional | Default |
---|---|---|---|---|
defaultValue | Default selected value | any | none | none |
disabled | Disable all radio buttons | boolean | false | |
name | The name property of all input[type="radio"] children | string | none | |
options | set children optional | string[] | Array<{ label: string value: string disabled?: boolean }> | 无 | 无 |
size | Size, only on radio style | string | large default small | default |
value | Used for setting the currently selected value. | any | none | none |
onChange | The callback function that is triggered when the state changes. | Function(e:Event) | none | none |
Methods#
Radio#
Name | Description |
---|---|
blur() | remove focus |
focus() | get focus |