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

文字说明

Form

Basic

The most basic usage.

TypeScript
JavaScript
import {
  Form,
  Checkbox,
  Switch,
} from 'antd';
import React from 'react';

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

const App: React.FC = () => {
  const [checked, setChecked] = React.useState(false)
  const [form] = Form.useForm()
  const userName = Form.useWatch('username', form);
  const fav = Form.useWatch('fav', form);
  console.log(form.getFieldsValue())
  const initialValues = {
    username: true,
    fav: ['A', "C"]
  }
  return (
    <div>
      <Switch defaultChecked onChange={onChange} />
      <Switch
        size="small"
        checked={checked}
        onChange={() => setChecked(!checked)}
      >
        文字说明
      </Switch>
      <br />
      <hr />
      <br />
      <h1>Form</h1>
      <Form
        layout="horizontal"
        form={form}
        initialValues={initialValues}
        onValuesChange={console.log}
      >
        <Form.Item label="Checkbox" valuePropName="checked" name="username">
          <Checkbox>Checkbox</Checkbox>
        </Form.Item>
        <Form.Item label="Switch" valuePropName="checked" name="username">
          <Switch>Switch</Switch>
        </Form.Item>
        <Form.Item label="Checkbox Group" name="fav">
          <Checkbox.Group>
            <Checkbox value="A">A</Checkbox>
            <Checkbox value="B">B</Checkbox>
            <Checkbox value="C">C</Checkbox>
          </Checkbox.Group>
        </Form.Item>
        <Form.Item label="Switch" name="fav">
          <Switch.Group>
            <Switch value="A">A</Switch>
            <Switch value="B">B</Switch>
            <Switch value="C">C</Switch>
          </Switch.Group>
        </Form.Item>
        <Form.Item label="Switch" name="fav">
          <Switch.Group layout="vertical">
            <Switch value="A">A</Switch>
            <Switch value="B">B</Switch>
            <Switch value="C">C</Switch>
          </Switch.Group>
        </Form.Item>
      </Form>
    </div>
  )
}

export default App;

Text & icon

With text and icon.

TypeScript
JavaScript
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.

TypeScript
JavaScript
import { Switch } from 'antd';
import React from 'react';

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

export default App;

Disabled

Disabled state of Switch.

TypeScript
JavaScript
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;

Two sizes

size="small" represents a small sized switch.

TypeScript
JavaScript
import { Switch } from 'antd';
import React from 'react';

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

export default App;

API#

Property	Description	Type	Default
autoFocus	Whether get focus when component mounted	boolean	false
checked	Determine whether the Switch is checked	boolean	false
checkedChildren	The content to be shown when the state is checked	ReactNode	-
className	The additional class to Switch	string	-
defaultChecked	Whether 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	The content to be shown when the state is unchecked	ReactNode	-
onChange	Trigger when the checked state is changing	function(checked: boolean, event: Event)	-
onClick	Trigger when clicked	function(checked: boolean, event: Event)	-

Methods#

Name	Description
blur()	Remove focus
focus()	Get focus