Checkbox

Multi-select item.

Reference

Type

ComponentType<CheckboxProps>

Examples

React

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

Vue

<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	✔️	✔️	✔️