---
name: "label"
mode: "component"
versionRequirements:
  - { name: "基础库", version: "2.10.0" }
title: "label - 用来改进表单组件的可用性"
---

## label

> [VERSION] 基础库 >= 2.10.0

### 描述

标签组件，用于改善表单组件的可用性。使用for属性找到对应的id，或者将控件放在该标签下，当点击时，就会触发对应的控件。 for优先级高于内部控件，内部有多个控件的时候默认触发第一个控件。 目前可以绑定的控件有：button, checkbox, radio, switch, input。

### 属性

| 属性 | 类型 | 必填 | 默认值 | 描述 |
| --- | --- | --- | --- | --- |
| `for` | `string` | 否 | - | 绑定控件的 id |

### 示例代码

#### 包裹控件扩大点击区域

*index.tyml*

```xml
<label class="label-item">
  <checkbox value="agree" />
  <text>点击文本也可以选中</text>
</label>
```

*index.tyss*

```css
.label-item {
  display: flex;
  align-items: center;
  padding: 20rpx;
}
```

*index.js*

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

#### 通过 for 绑定多种控件

*index.tyml*

```xml
<view class="item">
  <checkbox id="cb1" value="check" />
  <label for="cb1">
    <text>通过 for 控制 Checkbox</text>
  </label>
</view>
<view class="item">
  <radio id="rd1" value="radio" />
  <label for="rd1">
    <text>通过 for 控制 Radio</text>
  </label>
</view>
<view class="item">
  <switch id="sw1" />
  <label for="sw1">
    <text>通过 for 控制 Switch</text>
  </label>
</view>
```

*index.tyss*

```css
.item {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}
.item text {
  margin-left: 16rpx;
}
```

*index.js*

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