Radio Button

Overview

Use the radio button component to prompt the user to select exactly one item from a small list of options.

All options are visible at the same time and display in a vertical stack.

An interesting bit of trivia… old timers may remember that car radios used to have physical buttons for changing the radio station. When you pushed in one button, it tuned to a specific station and pushed out all the other buttons. This mutual exclusion behavior was needed in modern UI too, so the industry settled on the term “radio buttons” for this component as a nod to these physical-world analogs from the past.

Development

Web component development

Component reference

p-radioButton

Implementation

Start by importing the RadioButtonModule module into your application.

import { RadioButtonModule } from 'primeng/radiobutton';

Display one p-radioButton instance for each list item.

<p-radioButton id="accountType" *ngFor="let accountType of accountTypesList" name="accountTypeGroup" [value]="accountType"
 label="{{accountType}}" [formControl]="accountType">
</p-radioButton>

In the TypeScript, create an array with the radio button options. Due to a bug with the PrimeNG p-radioButton when used in a reactive form, you’ll need to subscribe to valueChanges so the user interface will correctly display the selected item. This is a known issue with PrimeNG and will be fixed in a future release.

public accountTypesList: string[] = ['Customer Account', 'Employee Account', 'Shareholder Account'];

constructor() {
    // Capture primeng radio buttons
    const accountType: any = this.editForm.get('accountType');

    // Manually subscribe to value changes on radio button changes and propagate back out 
    // due to bug in PrimeNG component: https://github.com/primefaces/primeng/issues/9162
    accountType.valueChanges.subscribe((value: any) => accountType.setValue(value, { emitEvent: false }));
}

Angular component development

Component reference

p-radioButton

Implementation

Start by importing the RadioButtonModule module into your application.

import { RadioButtonModule } from 'primeng/radiobutton';

Display one p-radioButton instance for each list item.

<p-radioButton id="accountType" *ngFor="let accountType of accountTypesList" name="accountTypeGroup" [value]="accountType"
 label="{{accountType}}" [formControl]="accountType">
</p-radioButton>

In the TypeScript, create an array with the radio button options. Due to a bug with the PrimeNG p-radioButton when used in a reactive form, you’ll need to subscribe to valueChanges so the user interface will correctly display the selected item. This is a known issue with PrimeNG and will be fixed in a future release.

public accountTypesList: string[] = ['Customer Account', 'Employee Account', 'Shareholder Account'];

constructor() {
    // Capture primeng radio buttons
    const accountType: any = this.editForm.get('accountType');

    // Manually subscribe to value changes on radio button changes and propagate back out 
    // due to bug in PrimeNG component: https://github.com/primefaces/primeng/issues/9162
    accountType.valueChanges.subscribe((value: any) => accountType.setValue(value, { emitEvent: false }));
}

Design

Figma design

Adobe XD design