- Components Overview
- General
- Layout
- Navigation
- Data Entry
- Data Display
- Feedback
- Other
Switching Selector.
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.The most basic usage.
import React from 'react';
import { Switch } from 'antd';
const onChange = (checked: boolean) => {
console.log(`switch to ${checked}`);
};
const App: React.FC = () => <Switch defaultChecked onChange={onChange} />;
export default App;
With text and icon.
import React from 'react';
import { CheckOutlined, CloseOutlined } from '@ant-design/icons';
import { Switch, Space } from 'antd';
const App: React.FC = () => (
<Space direction="vertical">
<Switch checkedChildren="开启" unCheckedChildren="关闭" defaultChecked />
<Switch checkedChildren="1" unCheckedChildren="0" />
<Switch
checkedChildren={<CheckOutlined />}
unCheckedChildren={<CloseOutlined />}
defaultChecked
/>
</Space>
);
export default App;
Mark a pending state of switch.
import React from 'react';
import { Switch } from 'antd';
const App: React.FC = () => (
<>
<Switch loading defaultChecked />
<br />
<Switch size="small" loading />
</>
);
export default App;
Disabled state of Switch.
import React, { useState } from 'react';
import { Button, Space, Switch } from 'antd';
const App: React.FC = () => {
const [disabled, setDisabled] = useState(true);
const toggle = () => {
setDisabled(!disabled);
};
return (
<Space direction="vertical">
<Switch disabled={disabled} defaultChecked />
<Button type="primary" onClick={toggle}>
Toggle disabled
</Button>
</Space>
);
};
export default App;
size="small" represents a small sized switch.
import React from 'react';
import { Switch } from 'antd';
const App: React.FC = () => (
<>
<Switch defaultChecked />
<br />
<Switch size="small" defaultChecked />
</>
);
export default App;
| 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) | - |
| Name | Description |
|---|---|
| blur() | Remove focus |
| focus() | Get focus |