CheckboxGroup component properties events and code samples - Mobile Platform as a Service

A CheckboxGroup component is used to group together a set of CheckboxItem components.

Important

CheckboxItem components must be used together with the CheckboxGroup component. If you want to use CheckboxItem components independently, use Checkbox.
The CheckboxGroup component must share the same uid with its inside CheckboxItem components, and the uid must be unique globally.
When you use CheckboxGroup as a form component with Form/FormItem, you must set the CheckboxGroup property of mode
to form.

Property

CheckboxGroup

Property	Description	Type	Default value
value	The value of the CheckboxGroup component. This property determines whether to select checkboxes.	string[]	[]
radius	Whether the component has a rounded corner.	boolean	false
position	The layout of the component.	'horizontal' \| 'vertical'	'vertical'
uid	A globally unique uid must be passed in when the page contains multiple CheckboxGroup components. In addition, the uid must be the same as that used by the internal CheckboxItem components.	string	-
header	The description of the header.	string	-
footer	The description of the footer.	string	-
disabled	Whether to disable the component.	boolean	false
mode	The mode.	'normal' \| 'form'	'normal'
className	The class name.	string	-

CheckboxItem

Property	Description	Type	Default value
checked	Whether a checkbox is selected.	boolean	false
disabled	Whether to disable a checkbox.	boolean	false
color	The color of a checkbox, which is the same as the value in the CSS code.	string	-
value	The value carried with a checkbox. This value is used when you submit the native form or use the CheckboxGroup component.	string	-
icon	The custom icon to indicate that a checkbox is not selected. The value can be an Icon or a path to an image.	string	-
checkedIcon	The custom icon to indicate that a checkbox is selected. The value can be an Icon or a path to an image.	string	-
disabledIcon	The custom icon to indicate that a checkbox is in disabled state. The value can be an Icon or a path to an image.	string	-
disabledCheckedIcon	The custom icon to indicate that a checkbox is selected and in disabled state. The value can be an Icon or a path to an image.	string	-
uid	A globally unique uid must be passed in when the page contains multiple CheckboxGroup components. In addition, the uid must be the same as that used by the external CheckboxItem components.	string	-
id	The ID of the form element.	string	-
name	The name of the form element.	string	-
className	The class name.	string	-

Event

Event name	Description	Type
onChange	The function is triggered when the selection status is changed.	`(value) => {}`

Slot

Name	Description
header	The content slot of the header.
footer	The content slot of the footer.

Style class

Class name	Description
amd-checkbox-group	The style of the entire CheckboxGroup component.
amd-list-header	The style of the header content.
amd-list-body	The style of the internal content.
amd-list-footer	The style of the footer content.

Class name	Description
amd-checkbox-item	The style of the entire CheckboxItem component.
amd-checkbox	The style of the entire original checkbox.
amd-checkbox-base	The style of the original checkbox.
amd-checkbox-fake	The style of the checkbox that is not selected.
amd-checkbox-checked	The style of the selected checkbox.

Code sample

Basic usage

The following shows an example of the code in the index.axml file:

<demo-block title="Basic">
  <checkbox-group 
    uid="group1"
    onChange="handleChange"
  >
    <checkbox-item 
      a:for="{{list}}"
      value="{{item.value}}"  
      uid="group1">
        {{item.label}}
    </checkbox-item>
  </checkbox-group>
</demo-block>


<demo-block title="Horizontal layout">
  <checkbox-group 
    uid="group4"
    position="horizontal"
    onChange="handleChange"
  >
  <checkbox-item 
    a:for="{{list}}"
    value="{{item.value}}"  
    uid="group4">
      {{item.label}}
  </checkbox-item>
  </checkbox-group>
</demo-block>

<demo-block title="Part disabled">
  <checkbox-group 
    uid="group2"
    value="{{['orange','banner']}}"
  >
    <checkbox-item 
      a:for="{{list}}"
      value="{{item.value}}"  
      disabled="{{index===1}}"
      uid="group2">
        {{item.label}}
    </checkbox-item>
  </checkbox-group>
</demo-block>

<demo-block title="Whole group disabled">
  <checkbox-group 
    uid="group3"
    value="{{['orange','banner']}}"
    disabled="{{true}}">

    <checkbox-item 
      a:for="{{list}}"
      value="{{item.value}}"  
      uid="group3">
        {{item.label}}
    </checkbox-item>
  </checkbox-group>
</demo-block>

<demo-block title="Custom icon">
  <checkbox-group 
    uid="group5"
    onChange="handleChange"
  >
    <checkbox-item 
      a:for="{{list}}"
      value="{{item.value}}"  
      icon="SmileOutline" checkedIcon="SmileFill"
      uid="group5">
        {{item.label}}
    </checkbox-item>

  </checkbox-group>
</demo-block>

The following shows an example of the code in the index.js file:

Page({
  data: {
    value: ['orange'],
    list: [
      { value: 'apple', label: 'apple' },
      { value: 'orange', label: 'orange' },
      { value: 'banana', label: 'banana' },
    ],
  },

  handleChange(value) {
    console.log('onChange', value);
  },
});

The following shows an example of the code in the index.acss file:

.btns {
  display: flex;
  padding: 0 24rpx 24rpx;
  justify-content: space-between;
}

.btns button {
  flex: 1;
  margin-right: 12rpx;
}

.btns button~button {
  margin-right: 0;
  margin-left: 12rpx;
}

The following shows an example of the code in the index.json file:

{
  "defaultTitle": "CheckBoxGroup",
  "usingComponents": {
    "demo-block": "../../components/DemoBlock/index",
    "checkbox-group": "antd-mini/es/CheckboxGroup/index",
    "checkbox-item": "antd-mini/es/CheckboxGroup/CheckboxItem/index"
  }
}