Importimport { Switch } from 'antd'; |
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 | Global Config |
|---|---|---|---|---|---|
| checked | Determine whether the Switch is checked | boolean | false | × | |
| checkedChildren | The content to be shown when the state is checked | ReactNode | - | × | |
| classNames | Customize class for each semantic structure inside the component. Supports object or function. | Record<SemanticDOM, string> | (info: { props })=> Record<SemanticDOM, string> | - | 6.0.0 | |
| 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: medium small | 'medium' | 'small' | medium | × | |
| styles | Customize inline style for each semantic structure inside the component. Supports object or function. | Record<SemanticDOM, CSSProperties> | (info: { props })=> Record<SemanticDOM, CSSProperties> | - | 6.0.0 | |
| 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 |
| Token Name | Description | Type | Default Value |
|---|---|---|---|
| colorPrimary | Brand color is one of the most direct visual elements to reflect the characteristics and communication of the product. After you have selected the brand color, we will automatically generate a complete color palette and assign it effective design semantics. | string | #1677ff |
| colorPrimaryBorder | The stroke color under the main color gradient, used on the stroke of components such as Slider. | string | #91caff |
| colorPrimaryHover | Hover state under the main color gradient. | string | #4096ff |
| colorText | Default text color which comply with W3C standards, and this color is also the darkest neutral color. | string | rgba(0,0,0,0.88) |
| colorTextLightSolid | Control the highlight color of text with background color, such as the text in Primary Button components. | string | #fff |
| colorTextQuaternary | The fourth level of text color is the lightest text color, such as form input prompt text, disabled color text, etc. | string | rgba(0,0,0,0.25) |
| colorTextTertiary | The third level of text color is generally used for descriptive text, such as form supplementary explanation text, list descriptive text, etc. | string | rgba(0,0,0,0.45) |
| fontFamily | The font family of Ant Design prioritizes the default interface font of the system, and provides a set of alternative font libraries that are suitable for screen display to maintain the readability and readability of the font under different platforms and browsers, reflecting the friendly, stable and professional characteristics. | string | -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' |
| fontSize | The most widely used font size in the design system, from which the text gradient will be derived. | number | 14 |
| fontSizeIcon | Control the font size of operation icon in Select, Cascader, etc. Normally same as fontSizeSM. | number | 12 |
| fontSizeSM | Small font size | number | 12 |
| lineHeight | Line height of text. | number | 1.5714285714285714 |
| lineWidthFocus | Control the width of the line when the component is in focus state. | number | 3 |
| marginXXS | Control the margin of an element, with the smallest size. | number | 4 |
| motionDurationMid | Motion speed, medium speed. Used for medium element animation interaction. | string | 0.2s |
| opacityLoading | Control the opacity of the loading state. | number | 0.65 |
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>