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â
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;
}
Propertiesâ
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 |
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 |
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. | 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.