CheckboxGroup

Properties

CheckboxGroup

Property	Description	Type	Default value
value	The CheckboxGroup value. Determines which child elements are checked.	string[]	[]
radius	Whether to apply a border radius.	boolean	false
position	The layout direction.	'horizontal' | 'vertical'	'vertical'
uid	Required when a page contains multiple CheckboxGroup components. The value must be unique on the page and match the `uid` of the inner CheckboxItem components.	string	-
header	The header description.	string	-
footer	The footer description.	string	-
disabled	Whether to disable the component.	boolean	false
mode	The operating mode.	'normal' | 'form'	'normal'
className	The custom class name.	string	-

CheckboxItem

Property	Description	Type	Default value
checked	Whether the check box is selected.	boolean	false
disabled	Whether to disable the check box.	boolean	false
color	The check box color, specified as a CSS color value.	string	-
value	The check box value, used when submitting a native form or within a CheckboxGroup.	string	-
icon	A custom icon for the unchecked state. Supports Icon and image paths.	string	-
checkedIcon	A custom icon for the checked state. Supports Icon and image paths.	string	-
disabledIcon	A custom icon for the disabled state. Supports Icon and image paths.	string	-
disabledCheckedIcon	A custom icon for the disabled and checked state. Supports Icon and image paths.	string	-
uid	Required when a page contains multiple CheckboxGroup components. The value must be unique on the page and match the `uid` of the outer CheckboxGroup.	string	-
id	The ID of the form element.	string	-
name	The name of the form element.	string	-
className	The custom class name.	string	-

Events

Event name	Description	Type
onChange	Triggered when the checked state changes.	(value) => {}

Slots

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

Style classes

Class name	Description
amd-checkbox-group	The overall style.
amd-list-header	The header content style.
amd-list-body	The inner content style.
amd-list-footer	The footer content style.

Class name	Description
amd-checkbox-item	The overall style.
amd-checkbox	The overall style of the native check box.
amd-checkbox-base	The style of the native check box.
amd-checkbox-fake	The style of the unchecked check box.
amd-checkbox-checked	The style of the checked check box.

Code examples

Basic usage

Example of index.axml:

<demo-block title="Basic usage">
  <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="Partially 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="Entire 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>

Example of index.js:

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

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

Example of index.acss:

.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;
}

Example of index.json:

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