ion-checkbox
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.
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.
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.
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>
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. |
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' |