版本：v8

ion-checkbox

shadow

复选框允许从一组选项中选择多个选项。激活时显示为已选中（打勾）状态。点击复选框将切换 checked 属性。也可以通过设置 checked 属性以编程方式选中它们。

基本用法

标签位置

开发者可以使用 labelPlacement 属性来控制标签相对于控件的放置方式。此属性对应 flexbox 的 flex-direction 属性。

对齐方式

开发者可以使用 alignment 属性来控制标签和控件在交叉轴上的对齐方式。此属性对应 flexbox 的 align-items 属性。

备注

堆叠复选框可以使用 alignment 属性进行对齐。当标签和控件需要在水平方向上居中时，这非常有用。

对齐排列

开发者可以使用 justify 属性来控制标签和控件在一行上的排列方式。此属性对应 flexbox 的 justify-content 属性。

备注

ion-item 仅在演示中使用以强调 justify 的工作方式。justify 的正常运行并不需要它。

不定状态复选框

标签内的链接

复选框标签有时可以附带链接。这些链接可以提供与复选框相关的更多信息。但是，点击链接不应选中复选框。为了实现这一点，我们可以使用 stopPropagation 来阻止点击事件冒泡。使用此方法时，标签的其余部分仍然可以点击。

帮助和错误文本

可以通过 helperText 和 errorText 属性在复选框内部使用帮助和错误文本。除非将 ion-invalid 和 ion-touched 类添加到 ion-checkbox，否则错误文本不会显示。这确保在用户有机会输入数据之前不会显示错误。

在 Angular 中，这是通过表单验证自动完成的。在 JavaScript、React 和 Vue 中，需要根据您自己的验证逻辑手动添加类。

主题定制

CSS 自定义属性

Interfaces

CheckboxChangeEventDetail

interface CheckboxChangeEventDetail<T = any> {
  value: T;
  checked: boolean;
}

CheckboxCustomEvent

虽然不是必须的，但可以使用此接口替代 CustomEvent 接口，以对此组件发出的 Ionic 事件提供更强的类型支持。

interface CheckboxCustomEvent<T = any> extends CustomEvent {
  detail: CheckboxChangeEventDetail<T>;
  target: HTMLIonCheckboxElement;
}

Properties

alignment

说明	How to control the alignment of the checkbox and label on the cross axis. `"start"`: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL. `"center"`: The label and control will appear at the center of the cross axis in both LTR and RTL. Setting this property will change the checkbox `display` to `block`.
属性	`alignment`
类型	`"center" ｜ "start" ｜ undefined`
默认值	`undefined`

checked

说明	If `true`, the checkbox is selected.
属性	`checked`
类型	`boolean`
默认值	`false`

color

说明	The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see theming.
属性	`color`
类型	`"danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string ｜ undefined`
默认值	`undefined`

disabled

说明	If `true`, the user cannot interact with the checkbox.
属性	`disabled`
类型	`boolean`
默认值	`false`

errorText

说明	Text that is placed under the checkbox label and displayed when an error is detected.
属性	`error-text`
类型	`string ｜ undefined`
默认值	`undefined`

helperText

说明	Text that is placed under the checkbox label and displayed when no error is detected.
属性	`helper-text`
类型	`string ｜ undefined`
默认值	`undefined`

indeterminate

说明	If `true`, the checkbox will visually appear as indeterminate.
属性	`indeterminate`
类型	`boolean`
默认值	`false`

justify

说明	How to pack the label and checkbox within a line. `"start"`: The label and checkbox will appear on the left in LTR and on the right in RTL. `"end"`: The label and checkbox will appear on the right in LTR and on the left in RTL. `"space-between"`: The label and checkbox will appear on opposite ends of the line with space between the two elements. Setting this property will change the checkbox `display` to `block`.
属性	`justify`
类型	`"end" ｜ "space-between" ｜ "start" ｜ undefined`
默认值	`undefined`

labelPlacement

说明	Where to place the label relative to the checkbox. `"start"`: The label will appear to the left of the checkbox in LTR and to the right in RTL. `"end"`: The label will appear to the right of the checkbox in LTR and to the left in RTL. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("..."). `"stacked"`: The label will appear above the checkbox regardless of the direction. The alignment of the label can be controlled with the `alignment` property.
属性	`label-placement`
类型	`"end" ｜ "fixed" ｜ "stacked" ｜ "start"`
默认值	`'start'`

mode

说明	The mode determines which platform styles to use. 这是一个虚拟属性，在初始化时设置一次，之后更改其值不会更新组件。
属性	`mode`
类型	`"ios" ｜ "md"`
默认值	`undefined`

name

说明	The name of the control, which is submitted with the form data.
属性	`name`
类型	`string`
默认值	`this.inputId`

required

说明	If true, screen readers will announce it as a required field. This property works only for accessibility purposes, it will not prevent the form from submitting if the value is invalid.
属性	`required`
类型	`boolean`
默认值	`false`

value

说明	The value of the checkbox does not mean if it's checked or not, use the `checked` property for that. The value of a checkbox is analogous to the value of an `<input type="checkbox">`, it's only used when the checkbox participates in a native `<form>`.
属性	`value`
类型	`any`
默认值	`'on'`

Events

Name	说明	冒泡
`ionBlur`	Emitted when the checkbox loses focus.	`true`
`ionChange`	Emitted when the checked property has changed as a result of a user action such as a click. This event will not emit when programmatically setting the `checked` property.	`true`
`ionFocus`	Emitted when the checkbox has focus.	`true`

Methods

该组件没有可用的公共方法。

CSS Shadow Parts

Name	说明
`container`	The container for the checkbox mark.
`error-text`	Supporting text displayed beneath the checkbox label when the checkbox is invalid and touched.
`helper-text`	Supporting text displayed beneath the checkbox label when the checkbox is valid.
`label`	The label text describing the checkbox.
`mark`	The checkmark used to indicate the checked state.
`supporting-text`	Supporting text displayed beneath the checkbox label.

CSS Custom Properties

Name	说明
`--border-color`	Border color of the checkbox icon
`--border-color-checked`	Border color of the checkbox icon when checked
`--border-radius`	Border radius of the checkbox icon
`--border-style`	Border style of the checkbox icon
`--border-width`	Border width of the checkbox icon
`--checkbox-background`	Background of the checkbox icon
`--checkbox-background-checked`	Background of the checkbox icon when checked
`--checkmark-color`	Color of the checkbox checkmark when checked
`--checkmark-width`	Stroke width of the checkbox checkmark
`--size`	Size of the checkbox icon
`--transition`	Transition of the checkbox icon

Name	说明
`--border-color`	Border color of the checkbox icon
`--border-color-checked`	Border color of the checkbox icon when checked
`--border-radius`	Border radius of the checkbox icon
`--border-style`	Border style of the checkbox icon
`--border-width`	Border width of the checkbox icon
`--checkbox-background`	Background of the checkbox icon
`--checkbox-background-checked`	Background of the checkbox icon when checked
`--checkmark-color`	Color of the checkbox checkmark when checked
`--checkmark-width`	Stroke width of the checkbox checkmark
`--size`	Size of the checkbox icon
`--transition`	Transition of the checkbox icon

Slots

Name	说明
	The label text to associate with the checkbox. Use the "labelPlacement" property to control where the label is placed relative to the checkbox.

基本用法​

标签位置​

对齐方式​

对齐排列​

不定状态复选框​

标签内的链接​

帮助和错误文本​

主题定制​

CSS 自定义属性​

Interfaces​

CheckboxChangeEventDetail​

CheckboxCustomEvent​

Properties​

alignment​

checked​

color​

disabled​

errorText​

helperText​

indeterminate​

justify​

labelPlacement​

mode​

name​

required​

value​

Events​

Methods​

CSS Shadow Parts​

CSS Custom Properties​

Slots​

目录