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.

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.

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​

interfaceCheckboxChangeEventDetail<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.

interfaceCheckboxCustomEvent<T=any>extendsCustomEvent{
 detail: CheckboxChangeEventDetail<T>;
 target: HTMLIonCheckboxElement;
}

Properties​

alignment​

checked​

color​

disabled​

errorText​

helperText​

indeterminate​

justify​

labelPlacement​

mode​

name​

required​

value​

Events​

Methods​

No public methods available for this component.

CSS Shadow Parts​

CSS Custom Properties​

Slots​