ionic tutorial - Ionic Radio Button | Ionic Button | Radio Button - ionic - ionic development - ionic 2 - ionic framework
- A radio button is a button that can be either checked or unchecked. A user can tap the button to check or uncheck it. It can also be checked from the template using the checked property.
- Use an element with a radio-group attribute to group a set of radio buttons. When radio buttons are inside a radio group, precisely one radio button in the group can be checked at any time.
- If a radio button is not placed in a group, they will have the capability to be checked simultaneously.
Adding Radio Buttons
- Since there will always be more than one radio button to select from, the best way is to create list. We did this whenever we required multiple elements.
- The list item class will be item-radio. Again, we will use label for this as with all the other forms. Input will have name attribute.
- This attribute will group all the buttons that you need to use as possible choice. This can be any name you need.
- Item-content class is used to display options clearly. At the end, we will use radio-icon class to add checkmark icon that will be used to mark option that user choose.
- In our below example there are four radio buttons, and the second one is chosen.
<div class="list">
<label class="item item-radio">
<input type="radio" name="group1">
<div class="item-content">
option 1
</div>
<i class="radio-icon ion-checkmark"></i>
</label>
<label class="item item-radio">
<input type="radio" name="group1">
<div class="item-content">
option 2
</div>
<i class="radio-icon ion-checkmark"></i>
</label>
<label class="item item-radio">
<input type="radio" name="group1">
<div class="item-content">
option 3
</div>
<i class="radio-icon ion-checkmark"></i>
</label>
<label class="item item-radio">
<input type="radio" name="group1">
<div class="item-content">
option 4
</div>
<i class="radio-icon ion-checkmark"></i>
</label>
</div>- Above code will produce following screen
Multiple Radio Button Groups
- Sometimes you want to create more than one group to choose from. This is what the name attribute is for. Next example will group first two and the last two buttons as two option groups.
- We will use item-divider class to separate two groups. Notice that the first group has name attribute equal to group1 and the second one use group2.
<div class="list">
<div class=" item item-divider">
Group1
</div>
<label class="item item-radio">
<input type="radio" name="group1">
<div class="item-content">
option 1
</div>
<i class="radio-icon ion-checkmark"></i>
</label>
<label class="item item-radio">
<input type="radio" name="group1">
<div class="item-content">
option 2
</div>
<i class="radio-icon ion-checkmark"></i>
</label>
<div class=" item item-divider">
Group2
</div>
<label class="item item-radio">
<input type="radio" name="group2">
<div class="item-content">
option 3
</div>
<i class="radio-icon ion-checkmark"></i>
</label>
<label class="item item-radio">
<input type="radio" name="group2">
<div class="item-content">
option 4
</div>
<i class="radio-icon ion-checkmark"></i>
</label>
</div>- Above code will produce following screen
