ant-design/components/switch/index.en-US.md
二货爱吃白萝卜 20561d6f9d
docs: Fix component doc alignment & support import usage ()
* docs: init ref

* docs all support

* docs: fix link show
2024-03-22 14:22:42 +08:00

69 lines
2.6 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

---
category: Components
group: Data Entry
title: Switch
description: Used to toggle between two states.
cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*rtArRpBNDZcAAAAAAAAAAAAADrJ8AQ/original
coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*al07RK8SGf4AAAAAAAAAAAAADrJ8AQ/original
demo:
cols: 2
---
## 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
<!-- prettier-ignore -->
<code src="./demo/basic.tsx">Basic</code>
<code src="./demo/disabled.tsx">Disabled</code>
<code src="./demo/text.tsx">Text & icon</code>
<code src="./demo/size.tsx">Two sizes</code>
<code src="./demo/loading.tsx">Loading</code>
<code src="./demo/component-token.tsx" debug>Custom component token</code>
## API
Common props ref[Common props](/docs/react/common-props)
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| 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 | |
| defaultValue | Alias for `defaultChecked` | boolean | - | 5.12.0 |
| 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 | - | |
| value | Alias for `checked` | boolean | - | 5.12.0 |
| 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 |
## Design Token
<ComponentTokenTable component="Switch"></ComponentTokenTable>
## FAQ
### Why not work in Form.Item?
Form.Item default bind value to `value` property, but Switch value property is `checked`. You can use `valuePropName` to change bind property.
```tsx | pure
<Form.Item name="fieldA" valuePropName="checked">
<Switch />
</Form.Item>
```