import {RadioButton} from 'primeng/primeng';
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';
}
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>
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. |
Name | Parameters | Description |
---|---|---|
click | -. | Callback to invoke on radio button click. |
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. |
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';
}