mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-14 16:19:15 +08:00
0da10b6cca
* feat(switch): support for `value` and `defaultValue` props
* docs: update docs
* chore: add unit case
(cherry picked from commit d25977cd16
)
* chore: update case
* chore: remove skip test case
2.5 KiB
2.5 KiB
category | group | title | cover | coverDark | demo | ||
---|---|---|---|---|---|---|---|
Components | Data Entry | Switch | https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*rtArRpBNDZcAAAAAAAAAAAAADrJ8AQ/original | https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*al07RK8SGf4AAAAAAAAAAAAADrJ8AQ/original |
|
Switching Selector.
When To Use
- If you need to represent the switching between two states or on-off state.
- The difference between
Switch
andCheckbox
is thatSwitch
will trigger a state change directly when you toggle it, whileCheckbox
is generally used for state marking, which should work in conjunction with submit operation.
Examples
Basic
Disabled
Text & icon
Two sizes
Loading
Custom component token
API
Common props ref: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
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.
<Form.Item name="fieldA" valuePropName="checked">
<Switch />
</Form.Item>