ion-checkbox

shadow

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

¥Checkboxes allow the selection of multiple options from a set of options. They appear as checked (ticked) when activated. Clicking on a checkbox will toggle the checked property. They can also be checked programmatically by setting the checked property.

基本用法

¥Basic Usage

标签放置

¥Label Placement

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

¥Developers can use the labelPlacement property to control how the label is placed relative to the control. This property mirrors the flexbox flex-direction property.

对齐

¥Alignment

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

¥Developers can use the alignment property to control how the label and control are aligned on the cross axis. This property mirrors the flexbox align-items property.

注意

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

¥Stacked checkboxes can be aligned using the alignment property. This can be useful when the label and control need to be centered horizontally.

齐行

¥Justification

开发者可以使用 justify 属性来控制标签和控件如何打包在一行上。此属性反映了 flexbox justify-content 属性。

¥Developers can use the justify property to control how the label and control are packed on a line. This property mirrors the flexbox justify-content property.

注意

ion-item 仅在演示中用于强调 justify 的工作原理。justify 不需要它即可正常运行。

¥ion-item is only used in the demos to emphasize how justify works. It is not needed in order for justify to function correctly.

不确定的复选框

¥Indeterminate Checkboxes

标签内的链接

¥Links inside of Labels

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

¥Checkbox labels can sometimes be accompanied with links. These links can provide more information related to the checkbox. However, clicking the link should not check the checkbox. To achieve this, we can use stopPropagation to prevent the click event from bubbling. When using this approach, the rest of the label still remains clickable.

主题化

¥Theming

CSS 自定义属性

¥CSS Custom Properties

接口

¥Interfaces

CheckboxChangeEventDetail

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

CheckboxCustomEvent

虽然不是必需的，但可以使用此接口代替 CustomEvent 接口，以便使用从此组件发出的 Ionic 事件进行更强的键入。

¥While not required, this interface can be used in place of the CustomEvent interface for stronger typing with Ionic events emitted from this component.

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

从旧版复选框语法迁移

¥Migrating from Legacy Checkbox Syntax

Ionic 7.0 中引入了更简单的复选框语法。这种新语法减少了设置复选框所需的样板，解决了可访问性问题，并改善了开发者体验。

¥A simpler checkbox syntax was introduced in Ionic 7.0. This new syntax reduces the boilerplate required to setup a checkbox, resolves accessibility issues, and improves the developer experience.

开发者可以一次勾选一个复选框来执行此迁移。虽然开发者可以继续使用旧语法，但我们建议尽快迁移。

¥Developers can perform this migration one checkbox at a time. While developers can continue using the legacy syntax, we recommend migrating as soon as possible.

使用现代语法

¥Using the Modern Syntax

使用现代语法涉及删除 ion-label 并将标签直接传递到 ion-checkbox 内部。可以使用 ion-checkbox 上的 labelPlacement 属性来配置标签的位置。可以使用 ion-checkbox 上的 justify 属性来控制标签和控件在一行上的打包方式。

¥Using the modern syntax involves removing the ion-label and passing the label directly inside of ion-checkbox. The placement of the label can be configured using the labelPlacement property on ion-checkbox. The way the label and the control are packed on a line can be controlled using the justify property on ion-checkbox.

JavaScript
Angular
React
Vue

<!-- Basic -->

<!-- Before -->
<ion-item>
  <ion-label>Checkbox Label</ion-label>
  <ion-checkbox></ion-checkbox>
</ion-item>

<!-- After -->
<ion-item>
  <ion-checkbox>Checkbox Label</ion-checkbox>
</ion-item>

<!-- Fixed Labels -->

<!-- Before -->
<ion-item>
  <ion-label position="fixed">Checkbox Label</ion-label>
  <ion-checkbox></ion-checkbox>
</ion-item>

<!-- After -->
<ion-item>
  <ion-checkbox label-placement="fixed">Checkbox Label</ion-checkbox>
</ion-item>

<!-- Checkbox at the start of line, Label at the end of line -->

<!-- Before -->
<ion-item>
  <ion-label slot="end">Checkbox Label</ion-label>
  <ion-checkbox></ion-checkbox>
</ion-item>

<!-- After -->
<ion-item>
  <ion-checkbox label-placement="end">Checkbox Label</ion-checkbox>
</ion-item>

<!-- Basic -->

<!-- Before -->
<ion-item>
  <ion-label>Checkbox Label</ion-label>
  <ion-checkbox></ion-checkbox>
</ion-item>

<!-- After -->
<ion-item>
  <ion-checkbox>Checkbox Label</ion-checkbox>
</ion-item>

<!-- Fixed Labels -->

<!-- Before -->
<ion-item>
  <ion-label position="fixed">Checkbox Label</ion-label>
  <ion-checkbox></ion-checkbox>
</ion-item>

<!-- After -->
<ion-item>
  <ion-checkbox labelPlacement="fixed">Checkbox Label</ion-checkbox>
</ion-item>

<!-- Checkbox at the start of line, Label at the end of line -->

<!-- Before -->
<ion-item>
  <ion-label slot="end">Checkbox Label</ion-label>
  <ion-checkbox></ion-checkbox>
</ion-item>

<!-- After -->
<ion-item>
  <ion-checkbox labelPlacement="end">Checkbox Label</ion-checkbox>
</ion-item>

{/* Basic */}

{/* Before */}
<IonItem>
  <IonLabel>Checkbox Label</IonLabel>
  <IonCheckbox></IonCheckbox>
</IonItem>

{/* After */}
<IonItem>
  <IonCheckbox>Checkbox Label</IonCheckbox>
</IonItem>

{/* Fixed Labels */}

{/* Before */}
<IonItem>
  <IonLabel position="fixed">Checkbox Label</IonLabel>
  <IonCheckbox></IonCheckbox>
</IonItem>

{/* After */}
<IonItem>
  <IonCheckbox labelPlacement="fixed">Checkbox Label</IonCheckbox>
</IonItem>

{/* Checkbox at the start of line, Label at the end of line */}

{/* Before */}
<IonItem>
  <IonLabel slot="end">Checkbox Label</IonLabel>
  <IonCheckbox></IonCheckbox>
</IonItem>

{/* After */}
<IonItem>
  <IonCheckbox labelPlacement="end">Checkbox Label</IonCheckbox>
</IonItem>

<!-- Basic -->

<!-- Before -->
<ion-item>
  <ion-label>Checkbox Label</ion-label>
  <ion-checkbox></ion-checkbox>
</ion-item>

<!-- After -->
<ion-item>
  <ion-checkbox>Checkbox Label</ion-checkbox>
</ion-item>

<!-- Fixed Labels -->

<!-- Before -->
<ion-item>
  <ion-label position="fixed">Checkbox Label</ion-label>
  <ion-checkbox></ion-checkbox>
</ion-item>

<!-- After -->
<ion-item>
  <ion-checkbox label-placement="fixed">Checkbox Label</ion-checkbox>
</ion-item>

<!-- Checkbox at the start of line, Label at the end of line -->

<!-- Before -->
<ion-item>
  <ion-label slot="end">Checkbox Label</ion-label>
  <ion-checkbox></ion-checkbox>
</ion-item>

<!-- After -->
<ion-item>
  <ion-checkbox label-placement="end">Checkbox Label</ion-checkbox>
</ion-item>

注意

在 Ionic 的过去版本中，ion-checkbox 需要 ion-item 才能正常运行。从 Ionic 7.0 开始，当项目放置在 ion-list 中时，ion-checkbox 只能在 ion-item 中使用。此外，ion-checkbox 正常运行不再需要 ion-item。

¥In past versions of Ionic, ion-item was required for ion-checkbox to function properly. Starting in Ionic 7.0, ion-checkbox should only be used in an ion-item when the item is placed in an ion-list. Additionally, ion-item is no longer required for ion-checkbox to function properly.

使用旧语法

¥Using the Legacy Syntax

Ionic 使用启发式方法来检测应用是否使用现代复选框语法。在某些情况下，最好继续使用旧语法。开发者可以将 ion-checkbox 上的 legacy 属性设置为 true，以强制该复选框实例使用旧语法。

¥Ionic uses heuristics to detect if an app is using the modern checkbox syntax. In some instances, it may be preferable to continue using the legacy syntax. Developers can set the legacy property on ion-checkbox to true to force that instance of the checkbox to use the legacy syntax.

属性

¥Properties

alignment

Description	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`.
Attribute	`alignment`
Type	`"center" ｜ "start" ｜ undefined`
Default	`undefined`

checked

Description	If `true`, the checkbox is selected.
Attribute	`checked`
Type	`boolean`
Default	`false`

color

Description	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.
Attribute	`color`
Type	`"danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string ｜ undefined`
Default	`undefined`

disabled

Description	If `true`, the user cannot interact with the checkbox.
Attribute	`disabled`
Type	`boolean`
Default	`false`

indeterminate

Description	If `true`, the checkbox will visually appear as indeterminate.
Attribute	`indeterminate`
Type	`boolean`
Default	`false`

justify

Description	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`.
Attribute	`justify`
Type	`"end" ｜ "space-between" ｜ "start" ｜ undefined`
Default	`undefined`

labelPlacement

Description	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.
Attribute	`label-placement`
Type	`"end" ｜ "fixed" ｜ "stacked" ｜ "start"`
Default	`'start'`

mode

Description	The mode determines which platform styles to use.
Attribute	`mode`
Type	`"ios" ｜ "md"`
Default	`undefined`

name

Description	The name of the control, which is submitted with the form data.
Attribute	`name`
Type	`string`
Default	`this.inputId`

value

Description	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>`.
Attribute	`value`
Type	`any`
Default	`'on'`

事件

¥Events

Name	Description	Bubbles
`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

No public methods available for this component.

CSS 阴影部分

¥CSS Shadow Parts

Name	Description
`container`	The container for the checkbox mark.
`label`	The label text describing the checkbox.
`mark`	The checkmark used to indicate the checked state.

CSS 自定义属性

¥CSS Custom Properties

Name	Description
`--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	Description
`--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	Description
``	The label text to associate with the checkbox. Use the "labelPlacement" property to control where the label is placed relative to the checkbox.

基本用法​

标签放置​

对齐​

齐行​

不确定的复选框​

标签内的链接​

主题化​

CSS 自定义属性​

接口​

CheckboxChangeEventDetail​

CheckboxCustomEvent​

从旧版复选框语法迁移​

使用现代语法​

使用旧语法​

属性​

alignment​

checked​

color​

disabled​

indeterminate​

justify​

labelPlacement​

mode​

name​

value​

事件​

方法​

CSS 阴影部分​

CSS 自定义属性​

插槽​

目录

基本用法

标签放置

对齐

齐行

不确定的复选框

标签内的链接

主题化

CSS 自定义属性

接口

CheckboxChangeEventDetail

CheckboxCustomEvent

从旧版复选框语法迁移

使用现代语法

使用旧语法

属性

alignment

checked

color

disabled

indeterminate

justify

labelPlacement

mode

name

value

事件

方法

CSS 阴影部分

CSS 自定义属性

插槽