label | uni-app-x

# label

用来改进表单组件的可用性，使用for属性找到对应的id，或者将控件放在该标签下，当点击时，就会触发对应的控件

# 兼容性

Web	微信小程序	Android	iOS	HarmonyOS
4.0	4.41	x	x	4.71

App平台可以用view加事件来替代label。

# 属性

名称

类型

默认值

兼容性

描述

disabled

boolean

是否禁用

for

string

绑定控件的 id

# 示例

示例为hello uni-app x alpha分支，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例另见

Template

Script

<template>
  <view>
    <page-head :title="title"></page-head>
    <view class="uni-common-mt">
      <view class="uni-form-item uni-column">
        <view class="title">表单组件在label内</view>
        <checkbox-group class="uni-list" @change="checkboxChange">
          <label class="uni-list-cell uni-list-cell-pd checkboxItemsTest label" v-for="item in checkboxItems"
            :key="item.name">
            <view>
              <checkbox :value="item.name" :checked="item.checked"></checkbox>
            </view>
            <view>{{item.value}}</view>
          </label>
        </checkbox-group>
      </view>

      <view class="uni-form-item uni-column">
        <view class="title">label用for标识表单组件</view>
        <radio-group class="uni-list radio-group" @change="radioChange">
          <view class="uni-list-cell uni-list-cell-pd" v-for="(item,index) in radioItems" :key="index">
            <view>
              <radio :id="item.name" :value="item.name" :checked="item.checked"></radio>
            </view>
            <label class="label-2-text" :for="item.name">
              <text>{{item.value}}</text>
            </label>
          </view>
        </radio-group>
      </view>

      <view class="uni-form-item uni-column">
        <view class="title">label内有多个时选中第一个</view>
        <checkbox-group class="uni-list" @change="checkboxForChange">
          <label class="label-3 label">
            <view class="uni-list-cell uni-list-cell-pd">
              <checkbox value="for1">选项一</checkbox>
            </view>
            <view class="uni-list-cell uni-list-cell-pd">
              <checkbox value="for2">选项二</checkbox>
            </view>
            <view class="uni-center" style="margin:10px 0;">
              <text class="uni-link">点击该label下的文字默认选中第一个checkbox</text>
            </view>
          </label>
        </checkbox-group>
      </view>
    </view>
  </view>
</template>


<style>
  .uni-list-cell {
    justify-content: flex-start
  }

  .uni-list .label-3 {
    padding: 0;
  }

  .label-2-text {
    flex: 1;
  }

  .uni-form-item {
    display: flex;
    width: 100%;
    padding: 5px 0;
  }

  .uni-form-item .title {
    padding: 5px 12px;
  }

  .radio-group {
    padding: 0 10px;
  }

  .label {
    margin: 0 10px;
  }
</style>