Build The Ionic App With Radio Button Classes In Visual Studio 2015

1. Creating the Ionic Radio button
   
   In HTML, we use label, input tag and Ionic Radio button classes to add Radio button.
   
   Explanation
   
   In the example mentioned below, we get the gender from the user. Thus, we are using Radio button with label, input tags
   
   Coding
   
   1. <label class="radio-content">
   2. <input type="radio">Male
   3. </label> <br/> <br/> <label class="radio-content">
   4. <input type="radio">Female
   5. </label>
   
   
   
2. Ionic Multiple Radio Button
   
   You can add multiple Ionic Radio buttons to fit in the container. This will add some margin to it and it will adjust Radio button size to your container. Here, we are using div, label and an input tag
   
   Explanation
   
   In the example mentioned below, we get the gender from the user. In the previous example, we used separate Radio button. We can select both at a time but here, we make it as a group (group1). Thus, we select only one from the group.
   
   Coding
   
   1. <div class="list"> <label class="item radio-content">
   2. <input type="radio" name="group1" />
   3. Delhi
   4. </label> <label class="item radio-content">
   5. <input type="radio" name="group1" />
   6. Mumbai
   7. </label> <label class="item radio-content">
   8. <input type="radio" name="group1" />
   9. Bangalore
   10. </label> <label class="item radio-content">
   11. <input type="radio" name="group1" />
   12. Chennai
   13. </label> </div>
   
   
   
3. Adding Multiple Ionic Radio button
   
   We can also use different groups of Radio buttons in a single page. For it, we will use item-divider class to separate the groups. We split it and gave different names to the groups like (gender, qualification and location).
   
   Explanation
   
   In the example mentioned below, we use item-divider to split the group. The first group is for getting the gender details and the second group is getting the job location details.
   
   Coding
   
   1. <div class="list">
   2. <div class="item item-divider"> Enter your Gender </div> <label class="item radio-content">
   3. <input type="radio" name="group1" />
   4. Male
   5. </label> <label class="item radio-content">
   6. <input type="radio" name="group1" />
   7. Female
   8. </label> </div>
   9. <div class="list">
   10. <div class="item item-divider"> Enter your Job Location </div> <label class="item radio-content">
   11. <input type="radio" name="group2" />
   12. Hydrabed
   13. </label> <label class="item radio-content">
   14. <input type="radio" name="group2" />
   15. Pune
   16. </label> <label class="item radio-content">
   17. <input type="radio" name="group2" />
   18. Bangalore
   19. </label> <label class="item radio-content">
   20. <input type="radio" name="group2" />
   21. Chennai
   22. </label> </div>
   
   

Step 5

Run the Application

Now, we are ready to run our Project. Click the Ripple – Nexus (Galaxy) to run the Application. (Apache Ripple is a free mobile simulator).



Output

Main Screen is shown below.



Output 1

After adding Ionic Radio button control, the output looks, as shown below.



Output 2

Adding Multiple Radio button will give the output, which is shown below.



Output 3

Apply different groups of Radio buttons.



Conclusion

I hope you understood how to use the Ionic Radio button classes in the Ionic blank app, using Visual Studio 2015 and how to run it.