---
name: "Label"
mode: "component"
versionRequirements:
  - { name: "@ray-js/ray", version: "0.5.10" }
title: "Label - 用来改进表单组件的可用性"
---

## Label

> [VERSION] @ray-js/ray >= 0.5.10

### 描述

标签，用于提升表单可用性：可通过 htmlFor 关联控件，或包裹控件扩大点击区域。

### 属性

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

### 示例代码

#### 基础用法

```tsx
import React from 'react';
import { View, Checkbox, Text, Label } from '@ray-js/ray';

export default function () {
  return (
    <View style={{ padding: '20px' }}>
      <Label>
        <Checkbox />
        <Text style={{ marginLeft: '8px' }}>点击文本也可以选中</Text>
      </Label>
    </View>
  );
}
```

#### htmlFor 绑定

```tsx
import React from 'react';
import { View, Checkbox, Radio, Switch, Text, Label } from '@ray-js/ray';

export default function () {
  return (
    <View style={{ padding: '20px' }}>
      <View style={{ marginBottom: '16px' }}>
        <Checkbox id="checkbox1" />
        <Label htmlFor="checkbox1">
          <Text style={{ marginLeft: '8px' }}>通过 htmlFor 控制 Checkbox</Text>
        </Label>
      </View>
      <View style={{ marginBottom: '16px' }}>
        <Radio id="radio1" />
        <Label htmlFor="radio1">
          <Text style={{ marginLeft: '8px' }}>通过 htmlFor 控制 Radio</Text>
        </Label>
      </View>
      <View style={{ marginBottom: '16px' }}>
        <Switch id="switch1" />
        <Label htmlFor="switch1">
          <Text style={{ marginLeft: '8px' }}>通过 htmlFor 控制 Switch</Text>
        </Label>
      </View>
    </View>
  );
}
```