Ionic Radio Button

From WikiOD

Ionic radio button[edit | edit source]

The ionic selected button is similar to the input element with standard type="radio". The following shows the radio buttons of the modern app type.

The name attribute of the input element with type="radio" in each item-radio is the same. The radio-icon class is used to display icons.

Ionic uses the <label> element in the single option to make it easier to click.

Instance[edit | edit source]
 <code><div class="list"></code>
 
 <label class="item item-radio">
   <input type="radio" name="group" value="go" checked="checked">
   <code><div class="item-content"></code>
     Go
   <code></div></code>
   <code><i class="radio-icon ion-checkmark"></i></code>
 </label>
 
 <label class="item item-radio">
   <input type="radio" name="group" value="python">
   <code><div class="item-content"></code>
     Python
   <code></div></code>
   <code><i class="radio-icon ion-checkmark"></i></code>
 </label>
 
 <label class="item item-radio">
   <input type="radio" name="group" value="ruby">
   <code><div class="item-content"></code>
     Ruby
   <code></div></code>
   <code><i class="radio-icon ion-checkmark"></i></code>
 </label>
 
 <label class="item item-radio">
   <input type="radio" name="group" value=".net">
   <code><div class="item-content"></code>
     .Net
   <code></div></code>
   <code><i class="radio-icon ion-checkmark"></i></code>
 </label>
 
 <label class="item item-radio">
   <input type="radio" name="group" value="java">
   <code><div class="item-content"></code>
     Java
   <code></div></code>
   <code><i class="radio-icon ion-checkmark"></i></code>
 </label>
 
 <label class="item item-radio">
   <input type="radio" name="group" value="php">
   <code><div class="item-content"></code>
     PHP
   <code></div></code>
   <code><i class="radio-icon ion-checkmark"></i></code>
 </label>
 
 <code></div></code>