ionic
  1. ionic-checkbox
PreviousNext

Ionic Checkbox

Ionic Checkbox is a UI component that allows the users to select multiple options or to confirm their choice. Checking or unchecking the checkbox indicates if the option is chosen or not.

Syntax

<ion-checkbox [(ngModel)]="variableName"></ion-checkbox>
  • [(ngModel)] - It allows two-way data binding.

Example

<ion-header>
  <ion-toolbar>
    <ion-title>
      Ionic Checkbox Example
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-list>
    <ion-item>
      <ion-label>Option 1</ion-label>
      <ion-checkbox [(ngModel)]="isCheckedOne"></ion-checkbox>
    </ion-item>
    <ion-item>
      <ion-label>Option 2</ion-label>
      <ion-checkbox [(ngModel)]="isCheckedTwo"></ion-checkbox>
    </ion-item>
    <ion-item>
      <ion-label>Option 3</ion-label>
      <ion-checkbox [(ngModel)]="isCheckedThree"></ion-checkbox>
    </ion-item>
  </ion-list>
</ion-content>

Output

The output of the Ionic Checkbox example will be three checkboxes with respective labels.

Explanation

In the above example, we have used the ion-checkbox component inside the ion-item component of ion-list. We also have used two-way data binding by using [(ngModel)] directive.

We have created isCheckedOne, isCheckedTwo, and isCheckedThree Boolean-type variables in the .ts file and used them in [(ngModel)] to bind with checkboxes.

Use

Ionic Checkbox is used when we want the users to select one or more options at the same time. This component is also used to get user confirmation before performing any action.

Important Points

  • ion-checkbox is an Angular Reactive Form Control.
  • Use [(ngModel)] directive to implement two-way data binding on checkboxes.

Summary

In this article, we have learned about the Ionic Checkbox component and its usage. We have also demonstrated the use of checkboxes in the example. Checkbox is a useful component when we need to offer the users a choice between multiple options or to confirm their selection.

CardsChip
Published on: