Ionic Radio Buttons
Ionic radio buttons are similar to the standard type="radio" input element. The following shows modern app-style radio buttons.
The name attribute of the input elements with type="radio" in each item-radio is the same. The radio-icon class is used to control whether the icon is displayed.
Ionic uses the <label> element for the radio options, making them easier to click.
Examples
<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>
Try it »
The result is as follows:
Other Extensions