Switch
Switch
Used to toggle between two states.
Importimport{ Switch }from"antd"; |
Sourcecomponents/switch |
DocsEdit this page |
Importimport{ Switch }from"antd"; |
Sourcecomponents/switch |
DocsEdit this page |
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.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) | - |
Name | Description |
---|---|
blur() | Remove focus |
focus() | Get focus |
Token Name | Description | Type | Default Value |
---|---|---|---|
handleBg | Background color of Switch handle | string | #fff |
handleShadow | Shadow of Switch handle | string | 0 2px 4px 0 rgba(0, 35, 11, 0.2) |
handleSize | Size of Switch handle | number | 18 |
handleSizeSM | Size of small Switch handle | number | 12 |
innerMaxMargin | Maximum margin of content area | number | 24 |
innerMaxMarginSM | Maximum margin of content area of small Switch | number | 18 |
innerMinMargin | Minimum margin of content area | number | 9 |
innerMinMarginSM | Minimum margin of content area of small Switch | number | 6 |
trackHeight | Height of Switch | string | number | 22 |
trackHeightSM | Height of small Switch | string | number | 16 |
trackMinWidth | Minimum width of Switch | string | number | 44 |
trackMinWidthSM | Minimum width of small Switch | string | number | 28 |
trackPadding | Padding of Switch | number | 2 |
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>