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 {RadioButton} 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 by defining ngFormControl or ngControl.


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

Attributes

Name Type Default Description
name string null Name of the checkbox group.
value any null Value of the checkbox.
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.

Dependencies

Native component that requires css of PrimeUI RadioButton.


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

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


export class RadioButtonDemo {

    val1: string;

    val2: string = 'Option 2';
    
}