Switch

Switching Selector.

When To Use#

  • If you need to represent the switching between two states or on-off state.

  • The difference between Switch and Checkbox is that Switch will trigger a state change directly when you toggle it, while Checkbox is generally used for state marking, which should work in conjunction with submit operation.

Examples

Basic

The most basic usage.

expand codeexpand code
import { Switch } from 'antd';

function onChange(checked) {
  console.log(`switch to ${checked}`);
}

ReactDOM.render(
  <Switch defaultChecked={false} onChange={onChange} />,
  mountNode
);
关
0
Text & icon

With text and icon.

expand codeexpand code
import { Switch, Icon } from 'antd';

ReactDOM.render(<div>
  <Switch checkedChildren="开" unCheckedChildren="关" />
  <br />
  <Switch checkedChildren="1" unCheckedChildren="0" />
  <br />
  <Switch checkedChildren={<Icon type="check" />} unCheckedChildren={<Icon type="cross" />} />
</div>, mountNode);

Disabled

Disabled state of Switch.

expand codeexpand code
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} />
        <br />
        <Button type="primary" onClick={this.toggle}>Toggle disabled</Button>
      </div>
    );
  }
}

ReactDOM.render(<App />, mountNode);

Two sizes

size="small" represents a small sized switch.

expand codeexpand code
import { Switch } from 'antd';

ReactDOM.render(
  <div>
    <Switch />
    <br />
    <Switch size="small" />
  </div>
, mountNode);

API#

Switch#

PropertyDescriptionTypeDefault
checkeddetermine whether the Switch is checkedbooleanfalse
defaultCheckedto set the initial statebooleanfalse
onChangea callback function, can be executed when the checked state is changingFunction(checked:Boolean)
checkedChildrencontent to be shown when the state is checkedstring|ReactNode
unCheckedChildrencontent to be shown when the state is uncheckedstring|ReactNode
sizethe size of the Switch, options: default smallstringdefault
SliderTreeSelect