---
name: "switch"
mode: "component"
versionRequirements:
  - { name: "基础库", version: "2.10.0" }
title: "switch - 开关选择器"
---

## switch

> [VERSION] 基础库 >= 2.10.0

### 描述

开关选择器。

### 属性

| 属性 | 类型 | 必填 | 默认值 | 描述 |
| --- | --- | --- | --- | --- |
| `checked` | `boolean` | 否 | `false` | 是否选中 |
| `disabled` | `boolean` | 否 | `false` | 是否禁用 |
| `color` | `string` | 否 | `""` | 选中时的颜色，同 CSS color |
| `name` | `string` | 否 | - | 在表单中的字段名 |
| `type` | `string` | 否 | `"switch"` | 样式类型，可选值：switch 开关样式，checkbox 复选框样式 |

#### 事件

| 事件名 | 类型 | 描述 |
| --- | --- | --- |
| `change` | `(event: SwitchChangeEvent) => void` | 选中状态改变时触发 |

**SwitchChangeEvent**

| 字段 | 类型 | 说明 |
| --- | --- | --- |
| `type` | `"change"` | 事件类型 |
| `detail` | `SwitchChangeDetail` | 事件数据 |

### 示例代码

#### 基础用法

*index.tyml*

```xml
<view>
  <switch checked="{{on}}" bind:change="onChange" />
  <text>状态: {{on ? '开' : '关'}}</text>
</view>
```

*index.tyss*

```css
switch {
  margin: 20rpx;
}
text {
  font-size: 28rpx;
  margin-left: 16rpx;
}
```

*index.js*

```javascript
Page({
  data: { on: false },
  onChange(e) {
    this.setData({ on: e.detail.value });
  },
});
```

#### 自定义颜色与禁用

*index.tyml*

```xml
<view>
  <switch checked="{{true}}" color="#ff5500" />
  <switch checked="{{true}}" color="#00cc00" />
  <switch disabled="{{true}}" checked="{{false}}" />
  <switch disabled="{{true}}" checked="{{true}}" />
</view>
```

*index.tyss*

```css
switch {
  display: block;
  margin: 20rpx;
}
```

*index.js*

```javascript
Page({});
```

#### Checkbox 类型

*index.tyml*

```xml
<view>
  <switch type="checkbox" checked="{{agreed}}" bind:change="onAgree" />
  <text>我已阅读并同意协议</text>
</view>
```

*index.tyss*

```css
view {
  display: flex;
  align-items: center;
  padding: 20rpx;
}
text {
  font-size: 28rpx;
  margin-left: 12rpx;
}
```

*index.js*

```javascript
Page({
  data: { agreed: false },
  onAgree(e) {
    this.setData({ agreed: e.detail.value });
  },
});
```