Ionic Radio Button


Ionic Radio Button: Radio button are specially used to select one item from the given list. There is main difference between the radio buttons and checkbox – Checkbox allows you multiple selection of items in list while radio buttons allows you to select only one item in given list. We are going to explain the functionality of radio buttons in ionic framework.


Ionic Radio Button

Here is an example of radio button in ionic –

Ionic Radio Button Example

<div class="list">

  <label class="item item-radio">
          <input type="radio" name="group" value="HTML" checked="checked">
          <div class="radio-content">
            <div class="item-content">
              HTML
            </div>
            <i class="radio-icon ion-checkmark"></i>
          </div>
 </label>
 
 <label class="item item-radio">
          <input type="radio" name="group" value="Android" >
          <div class="radio-content">
            <div class="item-content">
              Android
            </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>
</div>

Try it »

After running the above example it will produce the following output as bellow-

Ionic Radio Button Example


User Ans/Comments

📖 Read More


Advertisements