All Products
Search
Document Center

Mobile Platform as a Service:label

Last Updated:Jul 27, 2023

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/>.

Attribute

Type

Description

Minimum version

for

String

The ID of the bound component.

-

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>