Checkbox
Multi-select item.
Type
ComponentType<CheckboxProps>
Examples
- React
- Vue
export default class PageCheckbox extends Component {
state = {
list: [
{
value: 'A',
text: 'A',
checked: false
},
{
value: 'B',
text: 'B',
checked: true
},
{
value: 'C',
text: 'C',
checked: false
},
{
value: 'D',
text: 'D',
checked: false
},
{
value: 'E',
text: 'E',
checked: false
},
{
value: 'F',
text: 'F',
checked: false
}
]
}
render () {
return (
<View className='page-body'>
<View className='page-section'>
<Text>default style</Text>
<Checkbox value='selected' checked>Selected</Checkbox>
<Checkbox style='margin-left: 20rpx' value='not-selected'>Not Selected</Checkbox>
</View>
<View className='page-section'>
<Text>recommended style</Text>
{this.state.list.map((item, i) => {
return (
<Label className='checkbox-list__label' for={i} key={i}>
<Checkbox className='checkbox-list__checkbox' value={item.value} checked={item.checked}>{item.text}</Checkbox>
</Label>
)
})}
</View>
</View>
)
}
}
<template>
<view class="container">
<view class="page-section">
<text>default style</text>
<checkbox value="selected" :checked="true">Selected</checkbox>
<checkbox style="margin-left: 20rpx;" value="not-selected">Not Selected</checkbox>
</view>
<view class="page-section">
<text>recommended style</text>
<label v-for="item in list" class="checkbox-list__label">
<checkbox class="checkbox-list__checkbox" :value="item.value" :checked="item.checked">{{ item.text }}</checkbox>
</label>
</view>
</view>
</template>
<script>
export default {
data() {
return {
list: [
{
value: 'yuche',
text: 'yuche',
checked: false
},
{
value: 'cjj',
text: 'cjj',
checked: true
},
{
value: 'xiexiaoli',
text: 'xiexiaoli',
checked: true
},
{
value: 'honly',
text: 'honly',
checked: true
},
{
value: 'cs',
text: 'cs',
checked: true
},
{
value: 'zhutianjian',
text: 'zhutianjian',
checked: true
},
{
value: '隔壁老李',
text: '隔壁老李',
checked: true
}
]
}
}
}
</script>
CheckboxProps
Property | Type | Default | Required | Description |
---|---|---|---|---|
value | string | Yes | The ID of the <checkbox/> component. When it is selected, a <checkbox-group/> change event is triggered, carrying the value of <checkbox/> . | |
disabled | boolean | false | No | Specifies whether to disable the component. |
checked | boolean | false | No | Specifies whether to select the checkbox by default. |
color | string | No | The color of the checkbox. It is the same as the color of the css. | |
onChange | `BaseEventOrigFunction<{ value: string[]; }> | No | The change event is triggered when the selected item changes, except for mini-program. |
Property Support
Property | WeChat Mini-Program | H5 | React Native |
---|---|---|---|
CheckboxProps.value | ✔️ | ✔️ | |
CheckboxProps.disabled | ✔️ | ✔️ | ✔️ |
CheckboxProps.checked | ✔️ | ✔️ | ✔️ |
CheckboxProps.color | ✔️ | ✔️ | ✔️ |
CheckboxProps.onChange | ✔️ | ✔️ |
API Support
API | WeChat Mini-Program | H5 | React Native |
---|---|---|---|
Checkbox | ✔️ | ✔️ | ✔️ |