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

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

• <strong>checked</strong>: Default state of radio (true|false). Only one radio can be checked at a time.
• <strong>color</strong>: Change color to available theme options | “primary“, “secondary“, “tertiary“, “success“, “warning“, “danger“, “light“
• <strong>disabled</strong>: Set to true to disable the radio control
• <strong>name</strong>: Used when form data need to be passed used as a key
• <strong>value</strong>: Used to pass form data used as the value of the key

Events

• <strong>(ionBlur)</strong>: Emitted when the radio button loses focus.
• <strong>(ionFocus)</strong>: Emitted when the radio button has focus.
• <strong>(ionSelect)</strong>: 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

• <strong>allow-empty-selection</strong>: If set to true, radio can be deselected like a checkbox.
• <strong>name</strong>: Used when form data need to be passed used as a key
• <strong>value</strong>: Used to pass form data used as the value of a key

Events

• <strong>(ionChange)</strong>: 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.

<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>

//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'
  }

}