ion-checkbox

Interfaces
Usage
Properties
Events
CSS Shadow Parts
CSS Custom Properties

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.

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;}

Usage#

Angular
Javascript
React
Stencil
Vue

<!-- Default Checkbox --><ion-checkbox></ion-checkbox>
<!-- Disabled Checkbox --><ion-checkbox disabled="true"></ion-checkbox>
<!-- Checked Checkbox --><ion-checkbox checked="true"></ion-checkbox>
<!-- Checkbox Colors --><ion-checkbox color="primary"></ion-checkbox><ion-checkbox color="secondary"></ion-checkbox><ion-checkbox color="danger"></ion-checkbox><ion-checkbox color="light"></ion-checkbox><ion-checkbox color="dark"></ion-checkbox>
<!-- Checkboxes in a List --><ion-list>  <ion-item *ngFor="let entry of form">    <ion-label>{{entry.val}}</ion-label>    <ion-checkbox slot="end" [(ngModel)]="entry.isChecked"></ion-checkbox>  </ion-item></ion-list>

import { Component } from '@angular/core';
@Component({  selector: 'app-page-home',  templateUrl: 'home.page.html',  styleUrls: ['home.page.scss']})export class HomePage {  public form = [      { val: 'Pepperoni', isChecked: true },      { val: 'Sausage', isChecked: false },      { val: 'Mushroom', isChecked: false }    ];}

<!-- Default Checkbox --><ion-checkbox></ion-checkbox>
<!-- Disabled Checkbox --><ion-checkbox disabled></ion-checkbox>
<!-- Checked Checkbox --><ion-checkbox checked></ion-checkbox>
<!-- Checkbox Colors --><ion-checkbox color="primary"></ion-checkbox><ion-checkbox color="secondary"></ion-checkbox><ion-checkbox color="danger"></ion-checkbox><ion-checkbox color="light"></ion-checkbox><ion-checkbox color="dark"></ion-checkbox>
<!-- Checkboxes in a List --><ion-list>  <ion-item>    <ion-label>Pepperoni</ion-label>    <ion-checkbox slot="end" value="pepperoni" checked></ion-checkbox>  </ion-item>
  <ion-item>    <ion-label>Sausage</ion-label>    <ion-checkbox slot="end" value="sausage" disabled></ion-checkbox>  </ion-item>
  <ion-item>    <ion-label>Mushrooms</ion-label>    <ion-checkbox slot="end" value="mushrooms"></ion-checkbox>  </ion-item></ion-list>

import React, { useState } from 'react';import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonCheckbox, IonList, IonItem, IonLabel, IonItemDivider } from '@ionic/react';
const checkboxList = [  { val: 'Pepperoni', isChecked: true },  { val: 'Sausage', isChecked: false },  { val: 'Mushroom', isChecked: false }];
export const CheckboxExamples: React.FC = () => {
  const [checked, setChecked] = useState(false);
  return (    <IonPage>      <IonHeader>        <IonToolbar>          <IonTitle>CheckboxExamples</IonTitle>        </IonToolbar>      </IonHeader>      <IonContent>        <IonList>          <IonItemDivider>Default Checkbox</IonItemDivider>          <IonItem>            <IonLabel>Checked: {JSON.stringify(checked)}</IonLabel>            <IonCheckbox checked={checked} onIonChange={e => setChecked(e.detail.checked)} />          </IonItem>
          <IonItemDivider>Disabled Checkbox</IonItemDivider>          <IonItem><IonCheckbox slot="end" disabled={true} /></IonItem>
          <IonItemDivider>Checkbox Colors</IonItemDivider>          <IonItem>            <IonCheckbox slot="end" color="primary" />            <IonCheckbox slot="end" color="secondary" />            <IonCheckbox slot="end" color="danger" />            <IonCheckbox slot="end" color="light" />            <IonCheckbox slot="end" color="dark" />          </IonItem>          <IonItemDivider>Checkboxes in a List</IonItemDivider>
          {checkboxList.map(({ val, isChecked }, i) => (            <IonItem key={i}>              <IonLabel>{val}</IonLabel>              <IonCheckbox slot="end" value={val} checked={isChecked} />            </IonItem>          ))}        </IonList>      </IonContent>    </IonPage>  );};

import { Component, h } from '@stencil/core';
@Component({  tag: 'checkbox-example',  styleUrl: 'checkbox-example.css'})export class CheckboxExample {  private form = [    { val: 'Pepperoni', isChecked: true },    { val: 'Sausage', isChecked: false },    { val: 'Mushroom', isChecked: false }  ];
  render() {    return [      // Default Checkbox      <ion-checkbox></ion-checkbox>,
      // Disabled Checkbox      <ion-checkbox disabled={true}></ion-checkbox>,
      // Checked Checkbox      <ion-checkbox checked={true}></ion-checkbox>,
      // Checkbox Colors      <ion-checkbox color="primary"></ion-checkbox>,      <ion-checkbox color="secondary"></ion-checkbox>,      <ion-checkbox color="danger"></ion-checkbox>,      <ion-checkbox color="light"></ion-checkbox>,      <ion-checkbox color="dark"></ion-checkbox>,
      // Checkboxes in a List      <ion-list>        {this.form.map(entry =>          <ion-item>            <ion-label>{entry.val}</ion-label>            <ion-checkbox slot="end" checked={entry.isChecked}></ion-checkbox>          </ion-item>        )}      </ion-list>    ];  }}

<template>  <!-- Default Checkbox -->  <ion-checkbox></ion-checkbox>
  <!-- Disabled Checkbox -->  <ion-checkbox disabled="true"></ion-checkbox>
  <!-- Checked Checkbox -->  <ion-checkbox checked="true"></ion-checkbox>
  <!-- Checkbox Colors -->  <ion-checkbox color="primary"></ion-checkbox>  <ion-checkbox color="secondary"></ion-checkbox>  <ion-checkbox color="danger"></ion-checkbox>  <ion-checkbox color="light"></ion-checkbox>  <ion-checkbox color="dark"></ion-checkbox>
  <!-- Checkboxes in a List -->  <ion-list>    <ion-item v-for="entry in form">      <ion-label>{{entry.val}}</ion-label>      <ion-checkbox        slot="end"        @update:modelValue="entry.isChecked = $event"        :modelValue="entry.isChecked">      </ion-checkbox>    </ion-item>  </ion-list></template>
<script>import { IonCheckbox, IonItem, IonLabel, IonList } from '@ionic/vue';import { defineComponent } from 'vue';
export default defineComponent({  components: { IonCheckbox, IonItem, IonLabel, IonList },  setup() {    const form = [      { val: 'Pepperoni', isChecked: true },      { val: 'Sausage', isChecked: false },      { val: 'Mushroom', isChecked: false }    ];        return { form };  }});</script>

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	`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
`ionBlur`	Emitted when the checkbox loses focus.
`ionChange`	Emitted when the checked property has changed.
`ionFocus`	Emitted when the checkbox has focus.

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

Contents