Ionic Checkbox

by Online Tutorials Library July 14, 2022

Ionic Checkbox

A checkbox is a type of input components which holds the Boolean value. It is similar to HTML checkbox inputs. The Ionic checkboxes are styled differently on each platform as like other Ionic components. You can use checked attribute with the <ion-checkbox> element to set the default value, and disabled attribute to disable the user from changing the value.

Example

The following example shows different types of checkboxes used in an Ionic application.

  <ion-header>    <ion-toolbar>      <ion-title>        CheckBox      </ion-title>    </ion-toolbar>  </ion-header>         <ion-content class=”padding” color=”light”>    <!– Default Checkbox –>    <div>      <ion-checkbox></ion-checkbox>      <ion-label> Default</ion-label>    </div>    <!– Disabled Checkbox –>    <div>      <ion-checkbox disabled=”true”></ion-checkbox>      <ion-label> Disabled</ion-label>    </div>    <!– Checked Checkbox –>    <div>      <ion-checkbox checked=”true”></ion-checkbox>      <ion-label> Checked</ion-label>    </div>  </ion-content>  

Output

When you execute the app in your terminal, it will give the following output.

Ionic Checkbox

Styling Checkbox

If you want to style your checkbox, use Ionic color attribute with the checkbox prefix. The following example explains the use of the Ionic color property with the checkbox component.

Example

  <ion-header>    <ion-toolbar>      <ion-title>        CheckBox      </ion-title>    </ion-toolbar>  </ion-header>         <ion-content class=”padding” color=”light”>    <!– Checkbox Colors –>    <ul><li>      <ion-checkbox color=”primary” checked=”false”></ion-checkbox>    </li></ul>    <ul><li>      <ion-checkbox color=”secondary” checked=”true”></ion-checkbox>    </li></ul>    <ul><li>      <ion-checkbox color=”light” checked=”true”></ion-checkbox>    </li></ul>    <ul><li>      <ion-checkbox color=”dark” checked=”false”></ion-checkbox>    </li></ul>    <ul><li>      <ion-checkbox color=”danger” checked=”true”></ion-checkbox>    </li></ul>  </ion-content>  

Output

Ionic Checkbox

Checkboxes in a List

You can also use checkbox with the list. The following example explains how checkbox can be used with the list.

Example

Home.page.html

  <ion-header>    <ion-toolbar>      <ion-title>        CheckBox      </ion-title>    </ion-toolbar>  </ion-header>         <ion-content class=”padding” color=”light”>   <!– Checkboxes in a List –>   <ion-list>      <ion-item *ngFor=”let entry of form”>        <ion-label>{{entry.val}}</ion-label>        <ion-checkbox slot=”start” [(ngModel)]=”entry.isChecked”></ion-checkbox>      </ion-item>    </ion-list>  </ion-content>  

Home.page.ts

  import { Component } from ‘@angular/core’;    @Component({    selector: ‘app-home’,    templateUrl: ‘home.page.html’,    styleUrls: [‘home.page.scss’],  })  export class HomePage {    public form = [       { val: ‘Pok?mon Yellow’ , isChecked: false},      { val: ‘Super Metroid’ , isChecked: true},      { val: ‘Mega Man X’ , isChecked: false},      { val: ‘Spider Man’ , isChecked: true}    ];  }  

Output

Ionic Checkbox

Next TopicIonic Chip

Ionic Checkbox

Ionic Checkbox

Example

Styling Checkbox

Checkboxes in a List

IntelliJ vs Eclipse

Parsing a Static JSON file in iOS application

You may also like