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
TODO Playground
Indeterminate Checkboxes
TODO Playground
Theming
TODO Playground
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 & Record<never, never> ๏ฝ 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 |
|---|---|
ionBlur | Emitted when the checkbox loses focus. |
ionChange | Emitted when the checked property has changed. |
ionFocus | Emitted when the checkbox has focus. |
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.