checkbox-ionic

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.


<ion-checkbox>Item1</ion-checkbox>

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


<ion-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>

    </ion-list>

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="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>

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


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

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


<ion-list>

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

</ion-list>

And finally add the below script to get multiple checkbox.


<script type="text/javascript">

    angular.module('starter',['ionic'])

    .controller('ctrl',function($scope){

      $scope.items=[1,2,3,4,5];

    })

</script>