Checkbox

Properties

Property	Type	Default value	Description
checked	boolean	false	Whether the checkbox is selected.
disabled	boolean	false	Whether the checkbox is disabled.
color	string	false	The color of the selected state, specified as a CSS color value.
value	string	-	The checkbox value, used when submitting a native form.
icon	string	-	A custom icon for the unchecked state. Supports Icon and image paths.
checkedIcon	string	-	A custom icon for the checked state. Supports Icon and image paths.
disabledIcon	string	-	A custom icon for the disabled state. Supports Icon and image paths.
disabledCheckedIcon	string	-	A custom icon for the disabled and checked state. Supports Icon and image paths.
id	string	-	The ID of the form element.
name	string	-	The name of the form element.
className	string	-	The class name.

Events

Event Name	Description	Type
onChange	Triggered when the checked state changes.	(checked: boolean) => void

Style classes

Class name	Description
amd-checkbox	Overall checkbox label style.
amd-checkbox-disabled	Style applied when the checkbox is disabled.
amd-checkbox-checked	Style applied when the checkbox is checked.
amd-checkbox-base	Base checkbox style.
amd-checkbox-fake	Style applied when the checkbox is unchecked.
amd-checkbox-fake-custom	Style applied when a custom icon is used.

Code examples

Basic usage

Example in index.axml:

<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>Check box with a description</text>
        </label>
      </list-item>
      <list-item className="demo-item">
        <label>
          <checkbox color="#00b578" checked/>
          <text>Specify color</text>
        </label>
      </list-item>
    </list>
  </demo-block>
  <demo-block title="Checked by Default" padding="0">
    <list-item className="demo-item">
      <label>
        <checkbox checked />
        <text>Checked by default</text>
      </label>
    </list-item>
  </demo-block>
  <demo-block title="Disabled State" padding="0">
    <list-item className="demo-item">
      <label>
        <checkbox disabled checked/>
        <text>Disabled state</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 (Image)</text>
      </label>
    </list-item>
  </demo-block>
</view>

Example in index.js:

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

Example in index.acss:

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

Example in index.json:

{
  "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"
  }
}