Radio & Radio Group

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.

Demo

Usage

To get started with the Radio Button component, first you have to import the IgxRadioModule inside your AppModule file:

// app.module.ts

...
import { IgxRadioModule } from 'igniteui-angular';

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

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

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

@import '~igniteui-angular/lib/core/styles/themes/index';

Following the simplest approach, we create a new theme that extends the igx-radio-theme and accepts some of the default theme's parameters:

$custom-radio-theme: igx-radio-theme(
    $disabled-color: lightgray,
    $empty-color:  #345779,
    $fill-color: #2dabe8,
    $fill-color-hover: #2dabe8,
    $fill-hover-border-color: #2dabe8
);
Using CSS variables

The last step is to pass the custom radio theme in our application:

@include igx-css-vars($custom-radio-theme);
Using Theme Overrides

In order to style components for older browsers, like Internet Explorer 11, we have to use a different approach, since it doesn't support CSS variables.

If the component is using the Emulated ViewEncapsulation, it is necessary to penetrate this encapsulation using ::ng-deep. To prevent the custom theme to leak into other components, be sure to include the :host selector before ::ng-deep:

:host {
     ::ng-deep {
        @include igx-radio($custom-radio-theme);
    }
}

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

@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"];

API References

Additional Resources

Our community is active and always welcoming to new ideas.