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.
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.
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.
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.
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 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.
While not required, this interface can be used in place of the CustomEvent interface for stronger typing with Ionic events emitted from this component.
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.
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.
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.
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.
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.