---
nav:
path: /components
group:
title: Information Entry
order: 10
toc: 'content'
---
# Switch
Switch selector, compared to the native Switch, it achieves a consistent experience on iOS and Android.
- Used when it is necessary to indicate the state of a switch or to switch between two states.
- The difference with Checkbox is that switching Switch will directly trigger a state change, while Checkbox is usually used for state markers and needs to be used in conjunction with commit operations.
## Introduction
In `index.json` Introducing Components in
```json
"usingComponents": {
#if ALIPAY
"ant-switch": "antd-mini/es/Switch/index"
#endif
#if WECHAT
"ant-switch": "antd-mini/Switch/index"
#endif
}
```
## Code Sample
### Basic use
```xml
```
```js
Page({
onChange(checked, e) {
console.log(checked);
},
});
```
### Disable mode
> Incoming `disabled` property, disable the collocated gray switch button.
```xml
```
### Custom Style
> - `checkedText`、`uncheckedText` Property, you can modify the contents when checked/unchecked.
> - `color` property, you can color the overall button atmosphere.
> - ` size` property, the switch can be resized, support `medium`、`small`、`x-small` Three options.
> - `loading` Property to set the loading state.
```xml
#if ALIPAY
#endif
```
### Controlled Mode
> `checked` property and `change` Events, used in conjunction with the implementation of controlled mode.
```xml
Switch
```
```js
Page({
data: {
checked: true,
},
handleChange(checked, e) {
#if ALIPAY
this.setData({
checked,
});
#endif
#if WECHAT
this.setData({
checked: checked.detail,
});
#endif
},
handleChangeByButton() {
console.log(this.data.checked);
this.setData({
checked: !this.data.checked,
});
},
});
```
### Demo Code
#1677ff
| #3086ff
| Switch Fill Color |
| --switch-border-color | #eeeeee
| #2b2b2b
| Switch border color |
| --switch-loading-color | #1677ff
| #3086ff
| Switch loading color |
| --switch-handle-bg | #ffffff
| #ffffff
| Switch handle background color |
| --switch-inner-color | #999999
| #616161
| Switch internal color |