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.
Angular Radio & Radio Group Example
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';
// import { IgxRadioModule } from '@infragistics/igniteui-angular'; for licensed package
@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:
@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
and accepts some of the default theme's parameters:
$custom-radio-theme: 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 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 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';
// 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.