Checkbox - Mobile Platform as a Service - Alibaba Cloud Documentation Center

A Checkbox component offers a group of options from which an end user can select multiple options. You can use this component independently to switch between two states. A checkbox is similar to a switch. The difference between a checkbox and a switch is that turning on or off the switch directly triggers the status change, however, the checkbox is used for marking a status and needs to be used with the submission operation.

Property

Property	Type	Default value	Description
checked	boolean	false	Whether a checkbox is selected.
disabled	boolean	false	Whether to disable a checkbox.
color	string	false	The color of the selected checkbox, which is the same as the value in the CSS code.
value	string	-	The value carried by a checkbox. This value is used when you submit the native form.
icon	string	-	The custom icon to indicate that a checkbox is not selected. The value can be an Icon or a path to an image.
checkedIcon	string	-	The custom icon to indicate that a checkbox is selected. The value can be an Icon or a path to an image.
disabledIcon	string	-	The custom icon to indicate that a checkbox is in disabled state. The value can be an Icon or a path to an image.
disabledCheckedIcon	string	-	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.
id	string	-	The ID of the form element.
name	string	-	The name of the form element.
className	string	-	The class name.

Event

Event name	Description	Type
onChange	Callback fired when the status of the selected checkbox is changed.	`(checked: boolean) => void`

Style class

Class name	Description
amd-checkbox	The style of a checkbox.
amd-checkbox-disabled	The style of a checkbox in disabled state.
amd-checkbox-checked	The style of a selected checkbox.
amd-checkbox-base	The style of an original checkbox.
amd-checkbox-fake	The style of a checkbox that is not selected.
amd-checkbox-fake-custom	The style of a custom icon.

Code sample

Basic usage

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

<view class="demo">
  <demo-block title="Basic usage" padding="0">
    <list>
      <list-item className="demo-item">
        <label>
          <checkbox/>
        </label>
      </list-item>
      <list-item className="demo-item">
        <label>
          <checkbox />
          <text>Checkbox with description</text>
        </label>
      </list-item>
      <list-item className="demo-item">
        <label>
          <checkbox color="#00b578" checked/>
          <text>Specify the color</text>
        </label>
      </list-item>
    </list>
  </demo-block>
  <demo-block title="Default selected" padding="0">
    <list-item className="demo-item">
      <label>
        <checkbox checked />
        <text>Default selected</text>
      </label>
    </list-item>
  </demo-block>
  <demo-block title="Disabled status" padding="0">
    <list-item className="demo-item">
      <label>
        <checkbox disabled checked/>
        <text>Disabled status</text>
      </label>
    </list-item>
  </demo-block>
  <demo-block title="Custom icon" padding="0">
    <list-item className="demo-item demo-item-icon">
      <label>
        <checkbox icon="SmileOutline" checkedIcon="SmileFill"/>
        <text>Custom icon (Icon)</text>
      </label>
    </list-item>
    <list-item className="demo-item demo-item-image">
      <label>
        <checkbox color="transparent" checked checkedIcon="https://gw.alipayobjects.com/mdn/rms_ffbcbf/afts/img/A*2oqcRL38fWwAAAAAAAAAAAAAARQnAQ"/>
        <text>Custom icon (picture)</text>
      </label>
    </list-item>
  </demo-block>
</view>

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

Page({
  data: {
    checked: false,
  },
  handleChange(v) {
    my.showToast({
      content: `The current checkbox is: ${v ? 'selected' : 'unselected'} status. `,
      duration: 1000,
    });
  },
  handleChangeControlledValue() {
    this.setData({ checked: !this.data.checked });
  },
});

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

.demo-item label {
  display: flex;
  align-items: center;
  line-height: 1;
}
label > text {
  padding-left: 12rpx;
}

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

{
  "defaultTitle": "CheckBox",
  "usingComponents": {
    "checkbox": "antd-mini/es/Checkbox/index",
    "list": "antd-mini/es/List/index",
    "list-item": "antd-mini/es/List/ListItem/index",
    "demo-block": "../../components/DemoBlock/index",
    "button": "antd-mini/es/Button/index"
  }
}