Radio Button

The Ignite UI for Angular Radio Button component allows the user to select a single option from an available set of options that are listed side by side.

Radio Button Demo


At its core the radio button component allows for a single option selection. The default styling is done according to the selection controls specification as per the Material Design guidelines. To get started with the Ignite UI for Angular Radio, let's first import the IgxRadioModule in the app.module.ts file:

// app.module.ts

import { IgxRadioModule } from 'igniteui-angular/main';

    imports: [..., IgxRadioModule],
export class AppModule {}

To get a simple radio button, add the following code inside the compnent template:

    Simple radio button

If all went well, you should see something like the following in the browser:


Radio buttons are only useful when added in a group. So let's enhance the code above by adding four radio buttons, each responsible for applying a certain color as a backgroung. We will bind the backgroundColor property of the containing div element to the component's selectedColor peroprty. You will notice that selectedColor also participates in a two way binding through the NgModel directive, therefore its value is updated each time the user selects a different radio button (color).

// radiogroup.component.ts
title = "Select Background";

public colors = ['Yellow', 'Red', "Green", "Transparent"];

public selectedColor: string = this.colors[3];

<div [style.background-color]="selectedColor">
    <igx-radio *ngFor="let color of colors" 
                name="color group" 
                [value] = "color" 

Pay attention that before using the ngModel directive in a two-way data binding, you must import the FormsModule and add it to the NgModule's imports list.

Try it! The final result would be something like that:

API Summary


The following inputs are available on the igx-switch component:

Name Type Description
value bool The value of the radio button.


The following outputs are available on the igx-switch component:

Name Type Description
change EventEmitter Emits an event when the radio is clicked.

Additional Resources

Our community is active and always welcoming to new ideas.