Ionic 5 Radio Button Lists & Group using ion-radio Component Tutorial with Examples

In this Ionic 5/4 tutorial, we’ll discuss how to create a dynamic list of radio button lists using groups in Ionic Angular application. In Ionic Framework we use the ion-radio and ion-radio-group to create a radio control field component.

Radio control is used to select a single value from a group of selection controls. The radio is generally depicted as a round circular interactive control using which a user can select a value from varied options available. This is mainly required where we are supposed to get only a single option out of multiple offerings in a form.

Ionic framework provided us the ion-radio UI component using which we can create a Radio control. The multiple set of radio controls are wrapped into a group with the ion-radio-group directive component. Thes directive components provide a wide variety of properties, events, and methods to use them efficiently in the real application.

We can add Radio form fields by simply adding <ion-radio> directive in web component which is converted into a customized Radio element.

Setup a new Ionic application

We’ll create a new Ionic application using Angular framework, with a starter blank template. You can update your Ionic CLI by hitting below command

$ npm install -g @ionic/cli

Create a new application

$ ionic start ionic-radio-button-group-list blank --type=angular

Move-in the application folder

$ cd ionic-radio-button-group-list

 

Adding Ionic Radio Lists using Groups

Ionic 5 Radio Button Lists &#038; Group using ion-radio Component Tutorial with Examples

Home Template HTML

The radio control is created by adding the ion-radio component, we are creating t dynamic list of Radio controls using the *ngFor directive and iterating them in the ion-list Ionic UI component. This dynamic list of radio controls is wrapped inside the ion-radio-group directive component.

Open the home.page.html file, then place following HTML code

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Ionic Radio List
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true" class="ion-padding">

  <ion-list>
    <ion-radio-group allow-empty-selection="true" name="radio-group" (ionChange)="radioGroupChange($event)" #radioGroup>
      <ion-list-header>
        <ion-label>Name</ion-label>
      </ion-list-header>

      <ion-item *ngFor="let item of radio_list" (ionFocus)="radioFocus()" (ionSelect)="radioSelect($event)"
        (ionBlur)="radioBlur()">
        <ion-label>{{item.text}}</ion-label>
        <ion-radio slot="start" name="{{item.name}}" value="{{item.value}}" checked="{{item.checked}}"
          color="{{item.color}}" disabled="{{item.disabled}}"></ion-radio>
      </ion-item>

    </ion-radio-group>
  </ion-list>

  <p><b>Radio Group Event</b><br />
    {{selectedRadioGroup | json}}</p>
  <p><b>Radio Item Event</b><br />
    {{selectedRadioItem | json}}</p>

</ion-content>

Let’s discuss the ion-radio & ion-radio-group UI component supported  Events, Properties, and Methods:

The Ion Radio Component

The <ion-radio> is used to create a single radio item with following available events and properties

Properties
  • checked: Default state of radio (true|false). Only one radio can be checked at a time.
  • color: Change color to available theme options | “primary“, “secondary“, “tertiary“, “success“, “warning“, “danger“, “light
  • disabled: Set to true to disable the radio control
  • name: Used when form data need to be passed used as a key
  • value: Used to pass form data used as the value of the key
Events
  • (ionBlur): Emitted when the radio button loses focus.
  • (ionFocus): Emitted when the radio button has focus.
  • (ionSelect): Emitted when the radio button is selected.

The Ion Radio Group

The <ion-radio-group>is used to wrap a set of radio items, to ensure only one item is selected. The following are some properties and events available on the radio group.

Properties
  • allow-empty-selection: If set to true, radio can be deselected like a checkbox.
  • name: Used when form data need to be passed used as a key
  • value: Used to pass form data used as the value of a key
Events
  • (ionChange): Emitted when the value has changed.

 

Home Class Component

In the home.page.ts file add the following code

//home.page.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  defaultSelectedRadio = "radio_2";
  //Get value on ionChange on IonRadioGroup
  selectedRadioGroup:any;
  //Get value on ionSelect on IonRadio item
  selectedRadioItem:any;

  radio_list = [
    {
      id: '1',
      name: 'radio_list',
      value: 'radio_1',
      text: 'One',
      disabled: false,
      checked: false,
      color: 'primary'
    }, {
      id: '2',
      name: 'radio_list',
      value: 'radio_2',
      text: 'Two',
      disabled: false,
      checked: true,
      color: 'secondary'
    }, {
      id: '3',
      name: 'radio_list',
      value: 'radio_3',
      text: 'Three',
      disabled: false,
      checked: false,
      color: 'danger'
    },
  ];

  radioGroupChange(event) {
    console.log("radioGroupChange",event.detail);
    this.selectedRadioGroup = event.detail;
  }

  radioFocus() {
    console.log("radioFocus");
  }
  radioSelect(event) {
    console.log("radioSelect",event.detail);
    this.selectedRadioItem = event.detail;
  }
  radioBlur() {
    console.log("radioBlur");
  }

}

In the radio_list object, we are having some properties to control the state of each traversed radio control in the list

  • disabled: If set to true that radio will be in a disabled state by default.
  • checked: If set to true that radio will be checked by default on component load.
  • color: Set the color of the radio.

Here we are also getting selected radio item value from the radio group event (ionChange) and radio item using (ionSelect)

The allow-empty-selection property enables the user to deselect the radio control after selection which is opposite to the natural behavior of a radio, but we can also achieve this.

How to get the value of selected Radio control in the List?

We have a (ionChange) event handler on the ion-radio-group component which will return the selected radio items value on change.

How to Select Ionic 4 Radio on Button Click Programmatically?

We can access Radio group using a template variable #ionRadioGroup then define it in component as @ViewChild using IonRadioGroup

Ionic 5 Radio Button Lists &#038; Group using ion-radio Component Tutorial with Examples

<ion-list>
    <ion-radio-group allow-empty-selection="true" name="radio-group" (ionChange)="radioGroupChange($event)" #radioGroup>
  
     ...

    </ion-radio-group>
  </ion-list>

  <ion-button (click)="selectTwo()">Select Second Radio</ion-button>

Then in home.page.ts define @ViewChild

//home.page.ts
import { Component, ViewChild } from '@angular/core';
import { IonRadioGroup } from '@ionic/angular';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  @ViewChild('radioGroup') radioGroup: IonRadioGroup
  
  //Get value on ionChange on IonRadioGroup
  selectedRadioGroup:any;
  //Get value on ionSelect on IonRadio item
  selectedRadioItem:any;

  radio_list = [
    {
      id: '1',
      name: 'radio_list',
      value: 'radio_1',
      text: 'One',
      disabled: false,
      checked: false,
      color: 'primary'
    }, {
      id: '2',
      name: 'radio_list',
      value: 'radio_2',
      text: 'Two',
      disabled: false,
      checked: false,
      color: 'secondary'
    }, {
      id: '3',
      name: 'radio_list',
      value: 'radio_3',
      text: 'Three',
      disabled: false,
      checked: false,
      color: 'danger'
    },
  ];

  radioGroupChange(event) {
    console.log("radioGroupChange",event.detail);
    this.selectedRadioGroup = event.detail;
  }

  radioFocus() {
    console.log("radioFocus");
  }
  radioSelect(event) {
    console.log("radioSelect",event.detail);
    this.selectedRadioItem = event.detail;
  }
  radioBlur() {
    console.log("radioBlur");
  }

  selectTwo(){
    this.radioGroup.value = 'radio_2'
  }

}

That’s it now you can run the Ionic application by hitting $ ionic serve --o see it in action.

Source Code

Find the source code of this tutorial in the GitHub repository here.

 

Conclusion

Finally, we have completed our Ionic Radio List Group tutorial and discussed how we can use the ion-radio and ion-radio-group UI component with several properties and even handling. We created the radio list using the ion-list component with dynamic data using *ngFor Angular directive.

If you find this helpful, please share it with others and do comment on your feedback and suggestion to improve this write.

Thanks for reading!

Subscribe
Notify of
guest
3 Comments
Newest
Oldest Most Voted
Inline Feedbacks
View all comments
Roberto

i got this:
Can’t bind to ‘checked’ since it isn’t a known property of ‘ion-radio’