<style>
  md-radio-button {
    max-width: 200px;
  }
</style>

<div>
  <h2>Radio buttons</h2>
  <h3>Inside of a radiogroup</h3>

  <md-radio-group #scifi (change)="onGroupChange()" id="scifi-group">
    <md-radio-button value="star-wars">Star Wars</md-radio-button>
    <md-radio-button value="star-trek" id="special-radio">Star Trek</md-radio-button>
    <md-radio-button value="bsg" disabled>Battlestar Galactica</md-radio-button>
    <md-radio-button [value]="thirdValue">Dr. Who</md-radio-button>
  </md-radio-group>

  <p>Your selection: {{scifi.value}}</p>
  <p>radio group value change count: {{groupValueChangeCount}}</p>

  <hr>
  <h3>Standalone</h3>

  <md-radio-button name="element" (click)="onIndividualClick()">Earth</md-radio-button>
  <md-radio-button name="element" (click)="onIndividualClick()">Fire</md-radio-button>
  <md-radio-button name="element" (click)="onIndividualClick()" disabled>Wind (disabled)</md-radio-button>
  <md-radio-button name="element" (click)="onIndividualClick()">Heart</md-radio-button>

  <p>individual radio value change count: {{individualValueChanges}}</p>

  <hr>
  <h3>Disabled radio group</h3>
  <p>Chosen: {{pokemon}}</p>
  <md-radio-group disabled [value]="pokemon">
    <md-radio-button value="fire">Charmander</md-radio-button>
    <md-radio-button value="leaf">Bulbasaur</md-radio-button>
    <md-radio-button value="water">Squirtle</md-radio-button>
  </md-radio-group>

  <button type="button" (click)="chooseCharmander()">Choose Charmander</button>
</div>
