---
name: "switch"
mode: "component"
versionRequirements:
  - { name: "Base Library", version: "2.10.0" }
title: "switch - Switch picker"
---

## switch

> [VERSION] Base Library >= 2.10.0

### Description

Switch.

### Props

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `checked` | `boolean` | No | `false` | Whether selected |
| `disabled` | `boolean` | No | `false` | Whether disabled |
| `color` | `string` | No | `""` | Color when selected, same as CSS color |
| `name` | `string` | No | - | Field name in the form |
| `type` | `string` | No | `"switch"` | Style type. Options: switch (toggle style), checkbox (checkbox style) |

#### Events

| Event | Type | Description |
| --- | --- | --- |
| `change` | `(event: SwitchChangeEvent) => void` | Triggered when the checked state changes |

**SwitchChangeEvent**

| Field | Type | Description |
| --- | --- | --- |
| `type` | `"change"` | Event type |
| `detail` | `SwitchChangeDetail` | Event data |

### Examples

#### Basic usage

*index.tyml*

```xml
// index.tyml
<view>
  <switch checked="{{on}}" bind:change="onChange" />
  <text>Status: {{on ? 'On' : 'Off'}}</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 });
  },
});
```

#### Custom colors and disabled state

*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 types

*index.tyml*

```xml
// index.tyml
<view>
  <switch type="checkbox" checked="{{agreed}}" bind:change="onAgree" />
  <text>I have read and agree to the terms</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 });
  },
});
```