Switch
Switch
Used to toggle between two states.
Importimport{ Switch }from"antd"; |
Sourcecomponents/switch |
- Components Overview
- General
- Layout
- Navigation
- Data Entry
- Data Display
- Feedback
- Other
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>
The most basic usage.
With text and icon.
Mark a pending state of switch.
Disabled state of Switch.
size="small" represents a small sized switch.
Custom component token.
