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

The most basic usage.

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

const onChange = (checked: boolean) => {
  console.log(`switch to ${checked}`);
};

const App: React.FC = () => <Switch defaultChecked onChange={onChange} />;

export default App;


With text and icon.

expand codeexpand code
import { CheckOutlined, CloseOutlined } from '@ant-design/icons';
import { Switch } from 'antd';
import React from 'react';

const App: React.FC = () => (
  <>
    <Switch checkedChildren="开启" unCheckedChildren="关闭" defaultChecked />
    <br />
    <Switch checkedChildren="1" unCheckedChildren="0" />
    <br />
    <Switch
      checkedChildren={<CheckOutlined />}
      unCheckedChildren={<CloseOutlined />}
      defaultChecked
    />
  </>
);

export default App;

Mark a pending state of switch.

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

const App: React.FC = () => (
  <>
    <Switch loading defaultChecked />
    <br />
    <Switch size="small" loading />
  </>
);

export default App;

Disabled state of Switch.

expand codeexpand code
import { Button, Switch } from 'antd';
import React, { useState } from 'react';

const App: React.FC = () => {
  const [disabled, setDisabled] = useState(true);

  const toggle = () => {
    setDisabled(!disabled);
  };

  return (
    <>
      <Switch disabled={disabled} defaultChecked />
      <br />
      <Button type="primary" onClick={toggle}>
        Toggle disabled
      </Button>
    </>
  );
};

export default App;

size="small" represents a small sized switch.

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

const App: React.FC = () => (
  <>
    <Switch defaultChecked />
    <br />
    <Switch size="small" defaultChecked />
  </>
);

export default App;

API#

PropertyDescriptionTypeDefault
autoFocusWhether get focus when component mountedbooleanfalse
checkedDetermine whether the Switch is checkedbooleanfalse
checkedChildrenThe content to be shown when the state is checkedReactNode-
classNameThe additional class to Switchstring-
defaultCheckedWhether to set the initial statebooleanfalse
disabledDisable switchbooleanfalse
loadingLoading state of switchbooleanfalse
sizeThe size of the Switch, options: default smallstringdefault
unCheckedChildrenThe content to be shown when the state is uncheckedReactNode-
onChangeTrigger when the checked state is changingfunction(checked: boolean, event: Event)-
onClickTrigger when clickedfunction(checked: boolean, event: Event)-

Methods#

NameDescription
blur()Remove focus
focus()Get focus