<custom chineseName="表单组件标签" engName="label"></custom>
<view class="wrap">
    <view class="card-area">
        <view class="top-description border-bottom">label用for标识表单组件</view>
        <radio-group class="group">
            <view s-for="item, index in radioItems">
                <label class="block {{item.checked == 'true' ? 'border-bottom': ''}}">
                    <radio id="{{item.name}}" value="{{item.name}}" checked="{{item.checked}}"></radio>
                    <label for="{{item.name}}"><text>{{item.value}}</text></label>
                </label>
            </view>
        </radio-group>
    </view>
    <view class="card-area">
        <view class="top-description border-bottom">表单组件在label内</view>
        <checkbox-group class="group">
            <view s-for="item, index in checkboxItems">
              <label class="block {{item.checked == 'true' ? 'border-bottom': ''}}">
                <checkbox value="{{item.name}}" checked="{{item.checked}}"></checkbox>
                <text>{{item.value}}</text>
              </label>
            </view>
        </checkbox-group>
    </view>
    <view class="card-area">
        <view class="top-description border-bottom">label内有多个选项时，选中第一个</view>
        <label>         
            <label class="block border-bottom">
                <checkbox>选项一</checkbox>
            </label>
            <label class="block border-bottom"> 
                <checkbox>选项二</checkbox>
            </label> 
            <label class="block border-bottom"> 
                <checkbox>选项三</checkbox>      
            </label>
            <view class="near-button">
                点击选中第一项
            </view>
        </label>
    </view>
</view>

