Skip to main content
Version: v6

ion-checkbox

shadow

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

DescriptionIf true, the checkbox is selected.
Attributechecked
Typeboolean
Defaultfalse

color

DescriptionThe 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.
Attributecolor
Type"danger" ๏ฝœ "dark" ๏ฝœ "light" ๏ฝœ "medium" ๏ฝœ "primary" ๏ฝœ "secondary" ๏ฝœ "success" ๏ฝœ "tertiary" ๏ฝœ "warning" ๏ฝœ string & Record<never, never> ๏ฝœ undefined
Defaultundefined

disabled

DescriptionIf true, the user cannot interact with the checkbox.
Attributedisabled
Typeboolean
Defaultfalse

indeterminate

DescriptionIf true, the checkbox will visually appear as indeterminate.
Attributeindeterminate
Typeboolean
Defaultfalse

mode

DescriptionThe mode determines which platform styles to use.
Attributemode
Type"ios" ๏ฝœ "md"
Defaultundefined

name

DescriptionThe name of the control, which is submitted with the form data.
Attributename
Typestring
Defaultthis.inputId

value

DescriptionThe 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>.
Attributevalue
Typeany
Default'on'

Events

NameDescriptionBubbles
ionBlurEmitted when the checkbox loses focus.Yes
ionChangeEmitted when the checked property has changed.Yes
ionFocusEmitted when the checkbox has focus.Yes

Methods

No public methods available for this component.

CSS Shadow Parts

NameDescription
containerThe container for the checkbox mark.
markThe checkmark used to indicate the checked state.

CSS Custom Properties

NameDescription
--backgroundBackground of the checkbox icon
--background-checkedBackground of the checkbox icon when checked
--border-colorBorder color of the checkbox icon
--border-color-checkedBorder color of the checkbox icon when checked
--border-radiusBorder radius of the checkbox icon
--border-styleBorder style of the checkbox icon
--border-widthBorder width of the checkbox icon
--checkmark-colorColor of the checkbox checkmark when checked
--checkmark-widthStroke width of the checkbox checkmark
--sizeSize of the checkbox icon
--transitionTransition of the checkbox icon

Slots

No slots available for this component.