ionic-framework/ionic/components/radio/test/basic/main.html

<ion-toolbar><ion-title>Radio Group</ion-title></ion-toolbar>


<ion-content>

  <form (submit)="doSubmit($event)" [ngFormModel]="fruitsForm">

    <ion-list radio-group ngControl="fruits">

      <ion-list-header>
        Fruits
      </ion-list-header>

      <ion-radio value="apple" checked="true">
        Apple
      </ion-radio>

      <ion-radio value="banana">
        Banana
      </ion-radio>

      <ion-radio value="cherry" secondary>
        Cherry (secondary color)
      </ion-radio>

      <ion-radio value="disabled" disabled="true">
        Disabled
      </ion-radio>

    </ion-list>

  </form>

  <div aria-hidden="true" text-center>
    <button (click)="setApple()" outline small>Select Apple</button>
    <button (click)="setBanana()" outline small>Select Banana</button>
    <button class="e2eCherry" (click)="setCherry()" outline small>Select Cherry</button>
  </div>

  <div padding>
    <code><b>fruits.dirty:</b> {{fruitsForm.controls.fruits.dirty}}</code><br>
    <code><b>fruits.value:</b> {{fruitsForm.controls.fruits.value}}</code><br>
  </div>

  <form (submit)="doSubmit($event)" [ngFormModel]="currencyForm">
    <ion-list radio-group ngControl="currenciesControl">
      <ion-list-header id="currencies">
        Currencies
      </ion-list-header>
      <ion-radio *ngFor="#currency of currencies" [checked]="currency==selectedCurrency" [value]="currency">{{currency}}</ion-radio>
    </ion-list>
  </form>

  <div padding>
    <code><b>currenciesControl.value:</b> {{currencyForm.controls.currenciesControl.value}}</code>
  </div>

  <ion-list radio-group [(ngModel)]="relationship">
    <ion-radio value="friends">Friends</ion-radio>
    <ion-radio value="enemies">Enemies</ion-radio>
  </ion-list>

  <div padding>
    <code><b>relationship:</b> {{relationship}}</code>
  </div>

  <ion-list radio-group [(ngModel)]="pet">
    <ion-radio value="dogs" checked>Dogs</ion-radio>
    <ion-radio value="cats">Cats</ion-radio>
    <ion-radio value="turtles">Turtles</ion-radio>
  </ion-list>

  <div padding>
    <code><b>pet:</b> {{pet}}</code>
  </div>

</ion-content>