Mobile Platform as a Service:label

You can use label to improve the usability of form components. Use the for attribute to find the id of the corresponding component, or place the component under this label. When you click the label, the corresponding component is focused.

for has a higher priority than internal components. When multiple internal components exist, the first component is triggered by default.

Currently, you can bind the following controls: <checkbox/>, <radio/>, <input/>, and <textarea/>.

Code sample

<view class="section">
  <view class="title">Checkbox, which is the checkbox nested in the label.</view>
    <checkbox-group>
      <view>
        <label>
          <checkbox value="aaa" />
          <text>aaa</text>
        </label>
      </view>
      <view>
        <label>
          <checkbox value="bbb" />
          <text>bbb</text>
        </label>
      </view>
    </checkbox-group>
  </view>
</view>

<view class="section">
  <view class="title">Radio, which is associated by for.</view>
    <radio-group>
      <view>
        <radio id="aaa" value="aaa" />
        <label for="aaa">aaa</label>
      </view>
      <view>
        <radio id="bbb" value="bbb" />
        <label for="bbb">bbb</label>
      </view>
    </radio-group>
  </view>
</view>

<view class="section">
  <view class="title">When multiple Checkbox items are clicked, only one of them is selected.</view>
    <label>
      <checkbox>Select me</checkbox>
      <checkbox>Do not select</checkbox>
      <checkbox>Do not select</checkbox>
      <checkbox>Do not select</checkbox>
      <view>
        <text>Click Me</text>
      </view>
    </label>
  </view>
</view>