RadioButton is an extension to a standard radio button element with skinning capabilities to opt for only one value at a time. The two-way binding is provided through the ngModel directive, which enables default values as either checked or unchecked (preselection). A basic example of a RadioButton component with a defined label text is written as follows:

<div class="ui-g">
  <div class="ui-g-12">
    <p-radioButton name="group1" value="Angular" label="Angular"
      [(ngModel)]="basic"></p-radioButton>
  </div>
  <div class="ui-g-12">
    <p-radioButton name="group1" value="React" label="React"
      [(ngModel)]="basic"></p-radioButton>
  </div>
  <div class="ui-g-12">
    <p-radioButton name="group1" value="Polymer" label="Polymer"
      [(ngModel)]="basic"></p-radioButton>
  </div>
</div>

In the preceding example, all radio buttons are mapped to the same group (name="group1") in order to work as a mutual exclusive radio group. The following screenshot shows a snapshot result of the radio button example:

The radio button component supports one event callback named onClick, which will be invoked on the click of a radio button element. The label attribute provides a label text for the radio button. The label is also clickable and selects the value. The label components associated with the radio button need to trigger the focus of input while click on it, this can be achieved with the inputId attribute.