Input - RadioButton - 《PrimeNG Document》

Documentation
Source

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

Documentation

Import


import {RadioButtonModule} from 'primeng/radiobutton';

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>

Properties

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.
tabindex	number	null	Index of the element in tabbing order.
inputId	string	null	Identifier of the focus input to match a label defined for the component.
style	object	null	Inline style of the component.
styleClass	string	null	Style class of the component.
labelStyleClass	string	null	Style class of the label.

Events

Name	Parameters	Description
onClick	event: Click event	Callback to invoke on radio button click.
onFocus	event: Focus event	Callback to invoke when the radio button receives focus.
onBlur	event: Blur event	Callback to invoke when the radio button loses focus.

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.
ui-label-active	Label element of a checked state.
ui-label-focus	Label element of a focused state.
ui-label-disabled	Label element of a disabled state.

Dependencies

None.

Source

View on GitHub


<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" inputId="opt1"></p-radioButton></div>
    <div class="ui-g-12"><p-radioButton name="group1" value="Option 2" label="Option 2" [(ngModel)]="val1" inputId="opt2"></p-radioButton></div>
    <div class="ui-g-12"><p-radioButton name="group1" value="Option 3" label="Option 3" [(ngModel)]="val1" inputId="opt3"></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="group2" value="Option 1" label="Option 1" [(ngModel)]="val2" inputId="preopt1"></p-radioButton></div>
    <div class="ui-g-12"><p-radioButton name="group2" value="Option 2" label="Option 2" [(ngModel)]="val2" inputId="preopt2"></p-radioButton></div>
    <div class="ui-g-12"><p-radioButton name="group2" value="Option 3" label="Option 3" [(ngModel)]="val2" inputId="preopt3"></p-radioButton></div>
</div>
Selected Value = {{val2||'none'}}


export class RadioButtonDemo {
    val1: string;
    val2: string = 'Option 2';
}