ion-checkbox

shadow

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

基本用法

标签位置

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

对齐方式

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

备注

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

排列方式

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

备注

ion-item 仅在演示中用于强调 justify 的工作方式。要让 justify 正常工作，并不需要 ion-item。

不确定状态复选框

标签内的链接

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

主题定制

CSS 自定义属性

接口

CheckboxChangeEventDetail

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

CheckboxCustomEvent

虽然不是必需的，但此接口可以替代 CustomEvent 接口，以便对此组件发出的 Ionic 事件进行更强的类型检查。

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

从旧版复选框语法迁移

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

开发者可以逐个复选框进行迁移。虽然开发者可以继续使用旧版语法，但我们建议尽快迁移。

使用现代语法

使用现代语法需要移除 ion-label，并将标签直接传递到 ion-checkbox 内部。标签的位置可以通过 ion-checkbox 上的 labelPlacement 属性进行配置。标签和控件在行上的排列方式可以通过 ion-checkbox 上的 justify 属性来控制。

JavaScript

<!-- 基础用法 -->

<!-- 之前 -->
<ion-item>
  <ion-label>复选框标签</ion-label>
  <ion-checkbox></ion-checkbox>
</ion-item>

<!-- 之后 -->
<ion-item>
  <ion-checkbox>复选框标签</ion-checkbox>
</ion-item>

<!-- 固定标签 -->

<!-- 之前 -->
<ion-item>
  <ion-label position="fixed">复选框标签</ion-label>
  <ion-checkbox></ion-checkbox>
</ion-item>

<!-- 之后 -->
<ion-item>
  <ion-checkbox label-placement="fixed">复选框标签</ion-checkbox>
</ion-item>

<!-- 复选框在行首，标签在行尾 -->

<!-- 之前 -->
<ion-item>
  <ion-label slot="end">复选框标签</ion-label>
  <ion-checkbox></ion-checkbox>
</ion-item>

<!-- 之后 -->
<ion-item>
  <ion-checkbox label-placement="end">复选框标签</ion-checkbox>
</ion-item>

Angular

<!-- 基础用法 -->

<!-- 之前 -->
<ion-item>
  <ion-label>复选框标签</ion-label>
  <ion-checkbox></ion-checkbox>
</ion-item>

<!-- 之后 -->
<ion-item>
  <ion-checkbox>复选框标签</ion-checkbox>
</ion-item>

<!-- 固定标签 -->

<!-- 之前 -->
<ion-item>
  <ion-label position="fixed">复选框标签</ion-label>
  <ion-checkbox></ion-checkbox>
</ion-item>

<!-- 之后 -->
<ion-item>
  <ion-checkbox labelPlacement="fixed">复选框标签</ion-checkbox>
</ion-item>

<!-- 复选框在行首，标签在行尾 -->

<!-- 之前 -->
<ion-item>
  <ion-label slot="end">复选框标签</ion-label>
  <ion-checkbox></ion-checkbox>
</ion-item>

<!-- 之后 -->
<ion-item>
  <ion-checkbox labelPlacement="end">复选框标签</ion-checkbox>
</ion-item>

React

{/* 基础用法 */}

{/* 之前 */}
<IonItem>
  <IonLabel>复选框标签</IonLabel>
  <IonCheckbox></IonCheckbox>
</IonItem>

{/* 之后 */}
<IonItem>
  <IonCheckbox>复选框标签</IonCheckbox>
</IonItem>

{/* 固定标签 */}

{/* 之前 */}
<IonItem>
  <IonLabel position="fixed">复选框标签</IonLabel>
  <IonCheckbox></IonCheckbox>
</IonItem>

{/* 之后 */}
<IonItem>
  <IonCheckbox labelPlacement="fixed">复选框标签</IonCheckbox>
</IonItem>

{/* 复选框在行首，标签在行尾 */}

{/* 之前 */}
<IonItem>
  <IonLabel slot="end">复选框标签</IonLabel>
  <IonCheckbox></IonCheckbox>
</IonItem>

{/* 之后 */}
<IonItem>
  <IonCheckbox labelPlacement="end">复选框标签</IonCheckbox>
</IonItem>

Vue

<!-- 基础用法 -->

<!-- 之前 -->
<ion-item>
  <ion-label>复选框标签</ion-label>
  <ion-checkbox></ion-checkbox>
</ion-item>

<!-- 之后 -->
<ion-item>
  <ion-checkbox>复选框标签</ion-checkbox>
</ion-item>

<!-- 固定标签 -->

<!-- 之前 -->
<ion-item>
  <ion-label position="fixed">复选框标签</ion-label>
  <ion-checkbox></ion-checkbox>
</ion-item>

<!-- 之后 -->
<ion-item>
  <ion-checkbox label-placement="fixed">复选框标签</ion-checkbox>
</ion-item>

<!-- 复选框在行首，标签在行尾 -->

<!-- 之前 -->
<ion-item>
  <ion-label slot="end">复选框标签</ion-label>
  <ion-checkbox></ion-checkbox>
</ion-item>

<!-- 之后 -->
<ion-item>
  <ion-checkbox label-placement="end">复选框标签</ion-checkbox>
</ion-item>

备注

在 Ionic 的早期版本中，ion-checkbox 需要 ion-item 才能正常工作。从 Ionic 7.0 开始，仅当 ion-item 放置在 ion-list 中时，才应在 ion-item 中使用 ion-checkbox。此外，ion-checkbox 不再需要 ion-item 即可正常工作。

使用旧版语法

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

属性

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

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

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'

legacy

Description	Set the legacy property to true to forcibly use the legacy form control markup. Ionic will only opt checkboxes in to the modern form markup when they are using either the aria-label attribute or have text in the default slot. As a result, the legacy property should only be used as an escape hatch when you want to avoid this automatic opt-in behavior. Note that this property will be removed in an upcoming major release of Ionic, and all form components will be opted-in to using the modern form markup.
Attribute	legacy
Type	boolean ｜ undefined
Default	undefined

mode

Description	The mode determines which platform styles to use. This is a virtual property that is set once during initialization and will not update if you change its value after the initial render.
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'

事件

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

方法

No public methods available for this component.

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 自定义属性

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