Label
Improves the availability of form components.
You can use the for property to find the appropriate ID. Alternatively, you can place the control within this tag, so that you can tap the tag to trigger the corresponding control. The for property takes precedence over internal controls. When multiple internal controls are available, the first control is triggered by default. The following controls can be bound to this component: button, checkbox, radio, and switch.
Type
ComponentType<LabelProps>
Examples
- React
- Vue
class App extends Components {
render () {
return (
<RadioGroup>
<Label className='example-body__label' for='1' key='1'>
<Radio id='1' value='USA'>USA</Radio>
</Label>
<Label className='example-body__label' for='2' key='2'>
<Radio id='2' value='CHN' checked>
CHN
</Radio>
</Label>
</RadioGroup>
)
}
}
<template>
<radio-group>
<label class="example-body__label" for="1" key="1">
<radio id="1" value="USA" />
USA
</label>
<label class="example-body__label" for="2" key="2">
<radio id="2" value="CHN" :checked="true" />
CHN
</label>
</radio-group>
</template>
LabelProps
Property | Type | Required | Description |
---|---|---|---|
for | string | No | The ID of the bound control, not supported in RN |
API Support
API | WeChat Mini-Program | Baidu Smart-Program | Alipay Mini-Program | ByteDance Micro-App | H5 | React Native |
---|---|---|---|---|---|---|
Label | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ |