Skip to main content
Version: Next

Checkbox

Multi-select item.

Reference

Type

ComponentType<CheckboxProps>

Examples

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>
)
}
}

CheckboxProps

PropertyTypeDefaultRequiredDescription
valuestringYesThe ID of the <checkbox/> component. When it is selected, a <checkbox-group/> change event is triggered, carrying the value of <checkbox/>.
disabledbooleanfalseNoSpecifies whether to disable the component.
checkedbooleanfalseNoSpecifies whether to select the checkbox by default.
colorstringNoThe color of the checkbox. It is the same as the color of the css.
onChange`BaseEventOrigFunction<{ value: string[]; }>NoThe change event is triggered when the selected item changes, except for mini-program.

Property Support

PropertyWeChat Mini-ProgramH5React Native
CheckboxProps.value✔️✔️
CheckboxProps.disabled✔️✔️✔️
CheckboxProps.checked✔️✔️✔️
CheckboxProps.color✔️✔️✔️
CheckboxProps.onChange✔️✔️

API Support

APIWeChat Mini-ProgramH5React Native
Checkbox✔️✔️✔️