2016-07-26 09:17:46 +08:00
---
category: Components
2022-11-09 12:28:04 +08:00
group: Data Entry
2016-07-26 09:17:46 +08:00
title: Switch
2022-11-30 20:14:41 +08:00
cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*rtArRpBNDZcAAAAAAAAAAAAADrJ8AQ/original
2023-02-09 22:17:31 +08:00
coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*al07RK8SGf4AAAAAAAAAAAAADrJ8AQ/original
2022-11-09 12:28:04 +08:00
demo:
cols: 2
2016-07-26 09:17:46 +08:00
---
Switching Selector.
2016-09-10 13:43:30 +08:00
## When To Use
2016-07-26 09:17:46 +08:00
- 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.
2022-11-09 12:28:04 +08:00
## Examples
2022-11-17 17:31:26 +08:00
<!-- prettier - ignore -->
2022-11-09 12:28:04 +08:00
< 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 >
2016-07-26 09:17:46 +08:00
## API
2023-08-08 18:27:48 +08:00
Common props ref：
2019-11-22 14:37:39 +08:00
| Property | Description | Type | Default |
| --- | --- | --- | --- |
2020-07-01 16:21:56 +08:00
| autoFocus | Whether get focus when component mounted | boolean | false |
| checked | Determine whether the Switch is checked | boolean | false |
2020-10-09 10:08:52 +08:00
| checkedChildren | The content to be shown when the state is checked | ReactNode | - |
2020-10-21 10:33:43 +08:00
| className | The additional class to Switch | string | - |
2020-07-01 16:21:56 +08:00
| defaultChecked | Whether to set the initial state | boolean | false |
2019-11-22 14:37:39 +08:00
| disabled | Disable switch | boolean | false |
2020-07-01 16:21:56 +08:00
| loading | Loading state of switch | boolean | false |
| size | The size of the Switch, options: `default` `small` | string | `default` |
2020-10-09 10:08:52 +08:00
| unCheckedChildren | The content to be shown when the state is unchecked | ReactNode | - |
2020-07-01 16:21:56 +08:00
| onChange | Trigger when the checked state is changing | function(checked: boolean, event: Event) | - |
| onClick | Trigger when clicked | function(checked: boolean, event: Event) | - |
2017-12-01 19:28:41 +08:00
## Methods
2022-11-17 17:31:26 +08:00
| Name | Description |
| ------- | ------------ |
| blur() | Remove focus |
| focus() | Get focus |
2023-04-11 10:25:24 +08:00
## Design Token
< ComponentTokenTable component = "Switch" > < / ComponentTokenTable >
