Switch
Switching Selector.
When To Use#
If you need to represent the switching between two states or on-off state.
The difference between
Switch
andCheckbox
is thatSwitch
will trigger a state change directly when you toggle it, whileCheckbox
is generally used for state marking, which should work in conjunction with submit operation.
Examples
import { Switch } from 'antd';
function onChange(checked) {
console.log(`switch to ${checked}`);
}
ReactDOM.render(<Switch defaultChecked onChange={onChange} />, mountNode);
import { Switch, Icon } from 'antd';
ReactDOM.render(
<div>
<Switch checkedChildren="开" unCheckedChildren="关" defaultChecked />
<br />
<Switch checkedChildren="1" unCheckedChildren="0" />
<br />
<Switch
checkedChildren={<Icon type="check" />}
unCheckedChildren={<Icon type="close" />}
defaultChecked
/>
</div>,
mountNode,
);
import { Switch } from 'antd';
ReactDOM.render(
<div>
<Switch loading defaultChecked />
<br />
<Switch size="small" loading />
</div>,
mountNode,
);
import { Switch, Button } from 'antd';
class App extends React.Component {
state = {
disabled: true,
};
toggle = () => {
this.setState({
disabled: !this.state.disabled,
});
};
render() {
return (
<div>
<Switch disabled={this.state.disabled} defaultChecked />
<br />
<Button type="primary" onClick={this.toggle}>
Toggle disabled
</Button>
</div>
);
}
}
ReactDOM.render(<App />, mountNode);
import { Switch } from 'antd';
ReactDOM.render(
<div>
<Switch defaultChecked />
<br />
<Switch size="small" defaultChecked />
</div>,
mountNode,
);
API#
Property | Description | Type | Default | Version |
---|---|---|---|---|
autoFocus | get focus when component mounted | boolean | false | |
checked | determine whether the Switch is checked | boolean | false | |
checkedChildren | content to be shown when the state is checked | string|ReactNode | ||
defaultChecked | to set the initial state | boolean | false | |
disabled | Disable switch | boolean | false | |
loading | loading state of switch | boolean | false | |
size | the size of the Switch , options: default small | string | default | |
unCheckedChildren | content to be shown when the state is unchecked | string|ReactNode | ||
onChange | trigger when the checked state is changing | Function(checked: boolean, event: Event) | ||
onClick | trigger when clicked | Function(checked: boolean, event: Event) | 3.13.0 | |
className | additional class to Switch | string | - | 3.10.1 |
Methods#
Name | Description | Version |
---|---|---|
blur() | remove focus | |
focus() | get focus |