Angular Radio & Radio Group Component Overview

    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.

    Angular Radio & Radio Group Example

    Getting Started with Ignite UI for Angular Radio Button

    To get started with the Ignite UI for Angular Radio Button component, first you need to install Ignite UI for Angular. In an existing Angular application, type the following command:

    ng add igniteui-angular

    For a complete introduction to the Ignite UI for Angular, read the getting started topic.

    The next step is to import the IgxRadioModule in the app.module.ts file.

    // app.module.ts

...
import { IgxRadioModule } from 'igniteui-angular';
// import { IgxRadioModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    ...
    imports: [..., IgxRadioModule],
    ...
})
export class AppModule {
    public selected: any;
}

    Alternatively, as of 16.0.0 you can import the IgxRadioGroupDirective and IgxRadioComponent as standalone dependencies, or use the IGX_RADIO_GROUP_DIRECTIVES token to import the component and all of its supporting components and directives.

    // home.component.ts

import { FormsModule } from '@angular/forms';
import { IGX_RADIO_GROUP_DIRECTIVES } from 'igniteui-angular';
// import { IGX_RADIO_GROUP_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package

@Component({
  selector: 'app-home',
  template: `
    <igx-radio-group>
      <igx-radio [(ngModel)]="selected" value="London">London</igx-radio>
      <igx-radio [(ngModel)]="selected" value="New York">New York</igx-radio>
      <igx-radio [(ngModel)]="selected" value="Tokyo">Tokyo</igx-radio>
      <igx-radio [(ngModel)]="selected" value="Sofia">Sofia</igx-radio>
    </igx-radio-group>
  `,
  styleUrls: ['home.component.scss'],
  standalone: true,
  imports: [IGX_RADIO_GROUP_DIRECTIVES, FormsModule],
  /* or imports: [IgxRadioComponent, IgxRadioGroupDirective, FormsModule] */
})
export class HomeComponent {
  public selected: any;
}

    Now that you have the Ignite UI for Angular Radio Button module or directives imported, you can start using the igx-radio-group directive and igx-radio component.

    Using the Angular Radio Button

    Radio buttons can be displayed using the following code inside the component template:

    <igx-radio [(ngModel)]="selected" value="option1">Option 1</igx-radio>
<igx-radio [(ngModel)]="selected" value="option2">Option 2</igx-radio>

    Label

    The labelPosition property can be used to change the default position of the label in the radio component. Users can choose between before and after. If not specified, the label will be placed after the radio button.

    <igx-radio [(ngModel)]="selected" value="option1" labelPosition="before">Option 1</igx-radio>
<igx-radio [(ngModel)]="selected" value="option2" labelPosition="before">Option 2</igx-radio>

    Properties

    Let's enhance the previous sample by adding four radio buttons, each responsible for applying a certain color as a background. We will bind the backgroundColor property of a div element to the component's selectedColor property. You will notice that selectedColor also participates in a two way binding relation through the NgModel directive, therefore its value is updated each time the user selects a different radio button (color).

    // radiogroup.component.ts
...
public colors = [{
    hex: '#f06a2f',
    name: 'Carrot'
}, {
    hex: '#ff134a',
    name: 'Watermelon'
}, {
    hex: '#7bc96f',
    name: 'Grass'
},
{
    hex: 'transparent',
    name: 'No color'
}];

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

    <!--radiogroup.component.html-->
<igx-radio *ngFor="let color of colors" name="color" [value]="color.hex" [(ngModel)]="selectedColor">
  {{color.name}}
</igx-radio>

<div [style.background-color]="selectedColor">...</div>

    Pay attention that if you don't use the NgModel directive in a two-way data binding, you must import the FormsModule and add it to the NgModule's imports list.

    The final result would be something like that:

    Styling

    Radio Theme Property Map

    When you modify a primary property, all related dependent properties are automatically updated to reflect the change:

    Primary Property Dependent Property Description
    $empty-color
    		 $hover-color Border and dot colors on hover
    $focus-outline-color (indigo)Focus outline color (Indigo theme)
    $fill-color
    		 $fill-color-hover Checked dot color on hover
    $fill-hover-border-color (non-bootstrap)Checked border color on hover
    $focus-border-color (bootstrap)Focus border color
    $focus-outline-color (bootstrap)Focus outlined color
    $focus-outline-color-filled (indigo)Focus outline color when radio is filled
    $label-color $label-color-hover Label text color on hover
    $error-color
    		 $error-color-hover Label, border, and dot color in invalid state on hover
    $focus-outline-color-errorFocus outline color in invalid state

    To get started with styling the radio buttons, we need to import the index file, where all the theme functions and component mixins live:

    @use "igniteui-angular/theming" as *;

// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';

    Following the simplest approach, we create a new theme that extends the radio-theme. By providing just two key parameters — $empty-color and $fill-color — you can generate a fully styled radio button. These values serve as the foundation for the theme, by providing them it will automatically compute all the required foreground and background colors for various states (e.g., hover, selected, disabled).

    $custom-radio-theme: radio-theme(
    $empty-color:  #345779,
    $fill-color: #2dabe8,
);

    Finally, include the custom theme in your application:

    @include css-vars($custom-radio-theme);

    Note

    The sample uses the Fluent Light schema.

    Styling with Tailwind

    You can style the radio button using our custom Tailwind utility classes. Make sure to set up Tailwind first.

    Along with the tailwind import in your global stylesheet, you can apply the desired theme utilities as follows:

    @import "tailwindcss";
...
@use 'igniteui-theming/tailwind/utilities/material.css';

    The utility file includes both light and dark theme variants.

    • Use light-* classes for the light theme.
    • Use dark-* classes for the dark theme.
    • Append the component name after the prefix, e.g., light-radio, dark-radio.

    Once applied, these classes enable dynamic theme calculations. From there, you can override the generated CSS variables using arbitrary properties. After the colon, provide any valid CSS color format (HEX, CSS variable, RGB, etc.).

    You can find the full list of properties in the radio-theme. The syntax is as follows:

    <igx-radio
class="!light-radio ![--empty-color:#576E60] ![--fill-color:#7B9E89]"
...
>
  New York
</igx-radio>
    Note

    The exclamation mark(!) is required to ensure the utility class takes precedence. Tailwind applies styles in layers, and without marking these styles as important, they will get overridden by the component’s default theme.

    At the end your radio button should look like this:

    Radio Group

    The Ignite UI for Angular Radio Group directive provides a grouping container that allows better control over the child radio components and supports template-driven and reactive forms.

    Demo

    Usage

    The Radio Group Directive is exported as an NgModule, thus all you need to do in your application is to import the IgxRadioModule in the app.module.ts file:

    // app.module.ts
...
import { IgxRadioModule } from 'igniteui-angular';
// import { IgxRadioModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    ...
    imports: [..., IgxRadioModule],
    ...
})

    To get started, create an igxRadioGroup and add several igxRadio components.

    Note that, setting a name property for the radio group is mandatory.

    <!--radio-group.component.html-->
<igx-radio-group name="fruitsRadioGroup">
  <igx-radio *ngFor="let fruit of fruits" value="{{fruit}}">
    {{fruit}}
  </igx-radio>
</igx-radio-group>

    // radio-group.component.ts
public fruits = ["Apple", "Mango", "Banana", "Orange"];

    Alignment

    Use the alignment input property to change the orientation of the igxRadio components in the radio group. Users can choose between horizontal and vertical. By default the radio group alignment is horizontal.

    //sample.component.ts
import { RadioGroupAlignment } from "igniteui-angular";
...
public alignment = RadioGroupAlignment.vertical;
...

    <!-- sample.component.html -->
<igx-radio-group [alignment]="alignment">
  <igx-radio [(ngModel)]="selected" value="London">London</igx-radio>
  <igx-radio [(ngModel)]="selected" value="New York">New York</igx-radio>
  <igx-radio [(ngModel)]="selected" value="Tokyo">Tokyo</igx-radio>
  <igx-radio [(ngModel)]="selected" value="Sofia">Sofia</igx-radio>
</igx-radio-group>

    API References

    Theming Dependencies

    Additional Resources

    Our community is active and always welcoming to new ideas.