ionic-framework/e2e/checkbox/basic/main.html

<ion-toolbar><ion-title>Checkboxes</ion-title></ion-toolbar>


<ion-content>

  <form (submit)="doSubmit($event)" [ng-form-model]="fruitsForm">

    <ion-list>

      <ion-checkbox value="apple" checked="true" ng-control="appleCtrl">
        Apple, value=apple, init checked
      </ion-checkbox>

      <ion-checkbox ng-control="bananaCtrl">
        Banana, init no checked/value attributes
      </ion-checkbox>

      <ion-checkbox value="cherry" disabled="true" ng-control="cherryCtrl">
        Cherry, value=cherry, init disabled
      </ion-checkbox>

      <ion-checkbox value="grape" [checked]="grapeChecked" [disabled]="grapeDisabled" ng-control="grapeCtrl">
        Grape, value=grape, init checked, disabled
      </ion-checkbox>

      <ion-checkbox secondary checked="true">
        secondary color
      </ion-checkbox>

      <ion-checkbox light checked="true">
        light color
      </ion-checkbox>

    </ion-list>

  </form>

  <p aria-hidden="true" class="align-center">
    <button (click)="toggleGrapeChecked()" outline small class="e2eGrapeChecked">Grape Checked</button>
    <button (click)="toggleGrapeDisabled()" outline small class="e2eGrapeDisabled">Grape Disabled</button>
    <button (click)="doSubmit($event)" outline small class="e2eSubmit">Submit</button>
  </p>

  <p aria-hidden="true" padding>
    <code>appleCtrl.dirty: {{fruitsForm.controls.appleCtrl.dirty}}</code><br>
    <code>appleCtrl.value: {{fruitsForm.controls.appleCtrl.value}}</code><br>
    <code>bananaCtrl.dirty: {{fruitsForm.controls.bananaCtrl.dirty}}</code><br>
    <code>bananaCtrl.value: {{fruitsForm.controls.bananaCtrl.value}}</code><br>
    <code>cherry.dirty: {{fruitsForm.controls.cherryCtrl.dirty}}</code><br>
    <code>cherry.value: {{fruitsForm.controls.cherryCtrl.value}}</code><br>
    <code>grape.dirty: {{fruitsForm.controls.grapeCtrl.dirty}}</code><br>
    <code>grape.value: {{fruitsForm.controls.grapeCtrl.value}}</code><br>
  </p>

  <pre aria-hidden="true" padding>{{formResults}}</pre>

</ion-content>