Ionic Radio Buttons

Ionic radio buttons are similar to standard type="radio" input elements. Below is an example of modern app-style radio buttons.

Each type="radio" input element within an item-radio has the same name attribute. The radio-icon class is used to determine whether to display an icon.

Ionic uses the <label> element within radio options to make them easier to tap.

Example

<div class="list">
<label class="item item-radio">
  <input type="radio" name="group" value="go" checked="checked">
   <div class="radio-content">
   <div class="item-content">
    Go
   </div>
   <i class="radio-icon ion-checkmark"></i>
  </div>
</label>

<label class="item item-radio">
  <input type="radio" name="group" value="python">
  <div class="radio-content">
   <div class="item-content">
    Python
   </div>
   <i class="radio-icon ion-checkmark"></i>
  </div>
</label>

<label class="item item-radio">
  <input type="radio" name="group" value="ruby">
  <div class="radio-content">
   <div class="item-content">
    Ruby
   </div>
   <i class="radio-icon ion-checkmark"></i>
  </div>
</label>

<label class="item item-radio">
  <input type="radio" name="group" value=".net">
  <div class="radio-content">
   <div class="item-content">
    .Net
   </div>
   <i class="radio-icon ion-checkmark"></i>
  </div>
</label>

<label class="item item-radio">
  <input type="radio" name="group" value="java">
  <div class="radio-content">
   <div class="item-content">
    Java
   </div>
   <i class="radio-icon ion-checkmark"></i>
  </div>
</label>

<label class="item item-radio">
  <input type="radio" name="group" value="php">
  <div class="radio-content">
   <div class="item-content">
    PHP
   </div>
   <i class="radio-icon ion-checkmark"></i>
  </div>
</label>
</div>

The runtime effect is as follows: