---
name: "label"
mode: "component"
versionRequirements:
  - { name: "Base Library", version: "2.10.0" }
title: "label - Used to improve the usability of form components"
---

## label

> [VERSION] Base Library >= 2.10.0

### Description

Label component used to improve form usability. Use the for attribute to find the corresponding id, or place the control under this label; tapping it will trigger the associated control. for takes precedence over inner controls; if multiple controls are inside, the first one is triggered by default. Currently bindable controls: button, checkbox, radio, switch, input

### Props

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `for` | `string` | No | - | ID of the bound control |

### Examples

#### Wrap controls to expand the tap area

*index.tyml*

```xml
// index.tyml
<label class=\"label-item\">
  <checkbox value=\"agree\" />
  <text>Clicking the text also selects</text>
</label>
```

*index.tyss*

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

*index.js*

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

#### Bind multiple controls via the for attribute

*index.tyml*

```xml
// index.tyml
<view class=\"item\">
  <checkbox id=\"cb1\" value=\"check\" />
  <label for=\"cb1\">
    <text>Control Checkbox via for</text>
  </label>
</view>
<view class=\"item\">
  <radio id=\"rd1\" value=\"radio\" />
  <label for=\"rd1\">
    <text>Control Radio via for</text>
  </label>
</view>
<view class=\"item\">
  <switch id=\"sw1\" />
  <label for=\"sw1\">
    <text>Control Switch via for</text>
  </label>
</view>
```

*index.tyss*

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

*index.js*

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