- 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.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;
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;
import React from 'react';
import { Switch } from 'antd';
const App: React.FC = () => (
<>
<Switch loading defaultChecked />
<br />
<Switch size="small" loading />
</>
);
export default App;
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;
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 |