The <ion-checkbox> directive is used as a checkbox in Ionic Framework. It gives a rich user experience, rather than using a plain HTML checkbox.

You will feel the difference when you use these codes is your app or browser using ionic live reload (ionic serve command).

The <ion-checkbox> directive gives a different look and feel for Android and iOS. iOS comes with a rounded checkbox whereas Android comes with a square checkbox.


We can create a list of checkbox using the <ion-checkbox> inside a list.


    <ion-checkbox class="checkbox-calm" >Item1</ion-checkbox>

    <ion-checkbox >Item2</ion-checkbox>

    <ion-checkbox >Item3</ion-checkbox>

    <ion-checkbox >Item4</ion-checkbox>

    <ion-checkbox >Item5</ion-checkbox>

    <ion-checkbox >Item6</ion-checkbox>

    <ion-checkbox >Item7</ion-checkbox>

    <ion-checkbox >Item8</ion-checkbox>


By default Ionic checkbox comes with a positive color class (blue color). You can change the color using Ionic standard color names like checkbox-calm, checkbox-royal, etc.

The above example can be written like below, using AngularJS. To understand this, you must be familiar with AngularJS.

Add AngularJS CDN in your index file.

<script src=""></script>

Add ng-controller="ctrl" in <body> tag.

<body ng-app="starter" ng-controller="ctrl">

Then add the below code inside <ion-content>.


    <ion-checkbox class="checkbox-calm" ng-repeat="x in items">Item{{x}}</ion-checkbox>


And finally add the below script to get multiple checkbox.

<script type="text/javascript">