支付宝小程序表单组件 Label

用于改进表单组件的可用性。

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

扫码体验

示例代码

<!-- API-DEMO page/component/label/label.axml -->
<view class="page">
  <view class="page-section">
    <view class="page-section-title">Checkbox</view>
    <view class="page-section-demo">
      <checkbox-group>
        <view>
          <label>
            <checkbox value="AngularJS" />
            <text> AngularJS</text>
          </label>
        </view>
        <view>
          <label>
            <checkbox value="React" />
            <text> React</text>
          </label>
        </view>
      </checkbox-group>
    </view>
  </view>


  <view class="page-section">
    <view class="page-section-title">Radio</view>
    <view class="page-section-demo">
      <radio-group>
        <view>
          <radio id="AngularJS" value="AngularJS" />
          <label for="AngularJS">AngularJS</label>
        </view>
        <view>
          <radio id="React" value="React" />
          <label for="React">React</label>
        </view>
      </radio-group>
    </view>
  </view>


  <view class="page-section">
    <view class="page-section-title">label中有多个 Checkbox 时，点击 label 关联的元素选择第一个，例如点击的“Click Me”</view>
    <view class="page-section-demo">
      <label>
        <checkbox>选中我</checkbox>
        <checkbox>选不中</checkbox>
        <checkbox>选不中</checkbox>
        <checkbox>选不中</checkbox>
        <view>
          <text>Click Me</text>
        </view>
      </label>
    </view>
  </view>
</view>
/* API-DEMO page/component/label/label.acss */
checkbox-group > view,
radio-group > view {
  margin-bottom: 12rpx;
}

属性