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
Indeterminate Checkboxes
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
checked
Description If
true, the checkbox is selected. Attribute
checked Type
boolean Default
falsecolor
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
undefineddisabled
Description If
true, the user cannot interact with the checkbox. Attribute
disabled Type
boolean Default
falseindeterminate
Description If
true, the checkbox will visually appear as indeterminate. Attribute
indeterminate Type
boolean Default
falsemode
Description The mode determines which platform styles to use.
Attribute
mode Type
"ios" | "md" Default
undefinedname
Description The name of the control, which is submitted with the form data.
Attribute
name Type
string Default
this.inputIdvalue
Description The value of the checkbox does not mean if it's checked or not, use the
The value of a checkbox is analogous to the value of an
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. | 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. |
mark | The checkmark used to indicate the checked state. |
CSS Custom Properties
| Name | Description |
|---|---|
--background | Background of the checkbox icon |
--background-checked | Background of the checkbox icon when checked |
--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 |
--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 |
Slots
No slots available for this component.