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

Radio Button Usage

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

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

To get a started with some radio buttons, add 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>

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

Radio Button Properties

Radio buttons are only useful when added in a group. Let's enhance the code above 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 title = "Select Background";

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 class="box" [style.background-color]="selectedColor"></div>

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:

Radio Group

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

Radio Group Demo

Radio Group 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 a started, create an igxRadioGroup and add several igxRadio components.

Note that, setting the igxRadioGroup name property is mandatory.

<!--radio-group.component.html-->
<igx-radio-group name="fruitsRadioGroup">
    <igx-radio class="radio-sample" *ngFor="let fruit of fruits" value="{{fruit}}">
        {{fruit}}
    </igx-radio>
</igx-radio-group>
// radio-group.component.ts
public fruits = ["Apple", "Mango", "Banana", "Orange"];

API Summary

Radio Button Inputs

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

Name Type Description
@Input() id string The unique id attribute to be used for the radio button. If you do not provide a value, it will be auto-generated.
@Input() labelId string The unique id attribute to be used for the radio button label. If you do not provide a value, it will be auto-generated.
@Input() name string The name attribute to be used for the radio button.
@Input() value any The value to be set for the radio button.
@Input() tabindex number Specifies the tabbing order of the radio button.
@Input() checked boolean Specifies the checked state of the radio button.
@Input() required boolean Specifies the required state of the radio button.
@Input() disabled boolean Specifies the disabled state of the radio button.
@Input() disableRipple boolean Specifies the whether the ripple effect should be disabled for the radio button.
@Input() labelPosition string or enum RadioLabelPosition Specifies the position of the text label relative to the radio button element. Possible values are "before" and "after".
@Input("aria-labelledby") ariaLabelledBy string Specify an external element by id to be used as label for the radio button.

Radio Button Outputs

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

Name Type Description
@Output() change EventEmitter Emitted when the radio button checked value changes.

Radio Button Methods

The following methods are available on the igx-radio component:

Name Description
select Selects the radio button.

Radio Group Inputs

The following inputs are available on the igx-radio-group component:

Name Type Description
@Input() name string The name attribute to be used for the radio group. All child radio buttons inherits this name.
@Input() value any The value of the currently selected radio button inside the group.
@Input() required boolean Specifies whether the radio group is required. Default value is false.
@Input() disabled boolean Specifies whether the radio group is disabled. Default value is false.
@Input() labelPosition string or enum RadioLabelPosition Specifies the position of the text label relative to the child radio buttons. Possible values are "before" and "after". Default value is after.
@Input() selected IgxRadioComponent Specifies the selected child radio button.

Radio Group Outputs

The following outputs are available on the igx-radio-group component:

Name Type Description
@Output() change EventEmitter Emitted after the radio group value has changed.

Additional Resources

Our community is active and always welcoming to new ideas.