import {RadioButtonModule} 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.
<p-radioButton name="groupname" value="ps4" formControlName="console"></p-radioButton>
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>
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. |
Name | Parameters | Description |
---|---|---|
onClick | - | 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. |
ui-chkbox-label | Label element. |
None.
<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="group2" value="Option 1" label="Option 1" [(ngModel)]="val2"></p-radioButton></div>
<div class="ui-g-12"><p-radioButton name="group2" value="Option 2" label="Option 2" [(ngModel)]="val2"></p-radioButton></div>
<div class="ui-g-12"><p-radioButton name="group2" 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';
}