2016-07-26 09:17:46 +08:00
---
category: Components
2016-11-09 14:43:32 +08:00
type: Data Entry
2016-07-26 09:17:46 +08:00
title: Switch
---
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.
## API
### Switch
2017-10-06 16:09:19 +08:00
| Property | Description | Type | Default |
2017-10-25 10:25:44 +08:00
| -------- | ----------- | ---- | ------- |
| checked | determine whether the `Switch` is checked | boolean | false |
| checkedChildren | content to be shown when the state is checked | string\|ReactNode | |
2017-10-06 16:09:19 +08:00
| defaultChecked | to set the initial state | boolean | false |
2017-10-25 10:25:44 +08:00
| disabled | Disable switch | boolean | false |
2017-10-06 16:09:19 +08:00
| size | the size of the `Switch` , options: `default` `small` | string | default |
2017-10-25 10:25:44 +08:00
| unCheckedChildren | content to be shown when the state is unchecked | string\|ReactNode | |
| onChange | a callback function, can be executed when the checked state is changing | Function(checked:Boolean) | |
