Ionic 4 | Add Radio Lists in Radio Group Example and Tutorial

After the release of Ionic 4, the team has changed many of the UI component directives and properties. In this post, we will discuss Radio and Radio Group UI web components available in Ionic 4.

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

There is also another directive available Radio Group which is mainly used to group a set or list of Radio items on the component.

Here we assume that you already have already created Ionic 4 application if not then you can create a new Ionic 4 application in the latest version on Ionic CLI

Implementation on Radio Lists

Now open your file then add the following HTML code


Used to create a single radio item with following available events and 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 key

value: Used to pass form data used as value of key


(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 radio group is used to wrap a set of radio items, to ensure only one item is selected. Following are some properties and events available on the radio group.


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


(ionChange): Emitted when the value has changed.

In file add radio listing object which is traversing over radio list using *ngFor.

To check any radio by default you can change value false to true in radio_list checked key.

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

How to Select Ionic 4 Radio on Button Click Programmatically?

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

Then in define @ViewChild


So here we discussed how to list radio items using radio group with all available events properties.

Thanks for visiting :) Let me know if you have some suggestions or feedback for this post in the comment section. Looking for any tutorial or demo on FreakyJolly, just drop me a message here

Leave a Reply

Notify of