ion-checkbox

shadow

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

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

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.

note

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

Justification

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.

note

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

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.

Helper & Error Text

Helper and error text can be used inside of a checkbox with the helperText and errorText property. The error text will not be displayed unless the ion-invalid and ion-touched classes are added to the ion-checkbox . This ensures errors are not shown before the user has a chance to enter data.

In Angular, this is done automatically through form validation. In JavaScript, React and Vue, the class needs to be manually added based on your own validation.

Theming

CSS Custom Properties

Interfaces

CheckboxChangeEventDetail

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

CheckboxCustomEvent

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

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

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>

                          
                         

note

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 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`

errorText

Description	Text that is placed under the checkbox label and displayed when an error is detected.
Attribute	`error-text`
Type	`string ｜ undefined`
Default	`undefined`

helperText

Description	Text that is placed under the checkbox label and displayed when no error is detected.
Attribute	`helper-text`
Type	`string ｜ undefined`
Default	`undefined`

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`

required

Description	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.
Attribute	`required`
Type	`boolean`
Default	`false`

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 Shadow Parts

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

Basic Usage ​

Label Placement ​

Alignment ​

Justification ​

Indeterminate Checkboxes ​

Links inside of Labels ​

Helper & Error Text ​

Theming ​

CSS Custom Properties ​

Interfaces ​

CheckboxChangeEventDetail ​

CheckboxCustomEvent ​

Migrating from Legacy Checkbox Syntax ​

Using the Modern Syntax ​

Using the Legacy Syntax ​

Properties ​

alignment ​

checked ​

color ​

disabled ​

errorText ​

helperText ​

indeterminate ​

justify ​

labelPlacement ​

mode ​

name ​

required ​

value ​

Events ​

Methods ​

CSS Shadow Parts ​

Basic Usage

Label Placement

Alignment

Justification

Indeterminate Checkboxes

Links inside of Labels

Helper & Error Text

Theming

CSS Custom Properties

Interfaces

CheckboxChangeEventDetail

CheckboxCustomEvent

Migrating from Legacy Checkbox Syntax

Using the Modern Syntax

Using the Legacy Syntax

Properties

alignment

checked

color

disabled

errorText

helperText

indeterminate

justify

labelPlacement

mode

name

required

value

Events

Methods

CSS Shadow Parts