RadioButton RadioButton is an extension to standard radio button element with skinning capabilities.

Basic

Selected Value = {{val1||'none'}}

Preselection

Selected Value = {{val2||'none'}}

Import


import {RadioButtonModule} from 'primeng/primeng';

Getting Started

Two-way value binding is defined using the standard ngModel directive.


<p-radioButton name="groupname" value="val1" [(ngModel)]="selectedValue"></p-radioButton>
<p-radioButton name="groupname" value="val2" [(ngModel)]="selectedValue"></p-radioButton>


export class ModelComponent {

    selectedValue: string;

}

As model is two-way binding enabled, giving a default value to the model is enough to display a radio button as checked by default.


export class ModelComponent {

    selectedValue: string = 'val1';

}

Model Driven Forms

RadioButton can be used in a model driven form as well.


<p-radioButton name="groupname" value="ps4" formControlName="console"></p-radioButton>

Label

The label attribute provides a label text for the radio button. This label is also clickable and selects value.


<p-radioButton name="groupname" value="val1" label="Option 2" [(ngModel)]="selectedValue"></p-radioButton>

            

Attributes

Name Type Default Description
name string null Name of the radiobutton group.
value any null Value of the radiobutton.
label string null Label of the radiobutton.
disabled boolean false When present, it specifies that the element should be disabled.

Events

Name Parameters Description
click - Callback to invoke on radio button click.

Styling

Following is the list of structural style classes, for theming classes visit theming page.

Name Element
ui-radiobutton Container element
ui-radiobutton-box Container of icon.
ui-radiobutton-icon Icon element.
ui-chkbox-label Label element.

Dependencies

Native component that requires css of PrimeUI RadioButton.


<h3 class="first">Basic</h3>
<div class="ui-g" style="width:250px;margin-bottom:10px">
    <div class="ui-g-12"><p-radioButton name="group1" value="Option 1" label="Option 1" [(ngModel)]="val1"></p-radioButton></div>
    <div class="ui-g-12"><p-radioButton name="group1" value="Option 2" label="Option 2" [(ngModel)]="val1"></p-radioButton></div>
    <div class="ui-g-12"><p-radioButton name="group1" value="Option 3" label="Option 3" [(ngModel)]="val1"></p-radioButton></div>
</div>
Selected Value = {{val1||'none'}}

<h3>Preselection</h3>
<div class="ui-g" style="width:250px;margin-bottom:10px">
    <div class="ui-g-12"><p-radioButton name="group1" value="Option 1" label="Option 1" [(ngModel)]="val2"></p-radioButton></div>
    <div class="ui-g-12"><p-radioButton name="group1" value="Option 2" label="Option 2" [(ngModel)]="val2"></p-radioButton></div>
    <div class="ui-g-12"><p-radioButton name="group1" value="Option 3" label="Option 3" [(ngModel)]="val2"></p-radioButton></div>
</div>
Selected Value = {{val2||'none'}}


export class RadioButtonDemo {

    val1: string;

    val2: string = 'Option 2';
    
}