CheckboxGroup

Multi-item picker, consisting of multiple checkbox components.

Reference

Type

ComponentType<CheckboxGroupProps>

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: 'E',
        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>
    )
  }
}

CheckboxGroupProps

Property	Type	Required	Description
name	string	No	The name is added to the form component as a key
onChange	BaseEventOrigFunction<{ value: string[]; }>	No	The change event is triggered when the selected item in <CheckboxGroup/>is changed. event.detail = { value: [An array of the values of the selected checkboxes.] }

Property Support

Property	WeChat Mini-Program	H5	React Native
CheckboxGroupProps.name		✔️
CheckboxGroupProps.onChange	✔️	✔️	✔️

API Support

API	WeChat Mini-Program	H5	React Native
CheckboxGroup	✔️	✔️	✔️