RadioButton is an extension to standard radio button element with theming.
import { RadioButtonModule } from 'primeng/radiobutton';
RadioButton is used as a controlled input with value and ngModel properties.
<div class="flex flex-wrap gap-3">
<div class="flex align-items-center">
<p-radioButton name="pizza" value="Cheese" [(ngModel)]="ingredient" inputId="ingredient1"></p-radioButton>
<label for="ingredient1" class="ml-2">Cheese</label>
</div>
<div class="flex align-items-center">
<p-radioButton name="pizza" value="Mushroom" [(ngModel)]="ingredient" inputId="ingredient2"></p-radioButton>
<label for="ingredient2" class="ml-2">Mushroom</label>
</div>
<div class="flex align-items-center">
<p-radioButton name="pizza" value="Pepper" [(ngModel)]="ingredient" inputId="ingredient3"></p-radioButton>
<label for="ingredient3" class="ml-2">Pepper</label>
</div>
<div class="flex align-items-center">
<p-radioButton name="pizza" value="Onion" [(ngModel)]="ingredient" inputId="ingredient4"></p-radioButton>
<label for="ingredient4" class="ml-2">Onion</label>
</div>
</div>
RadioButtons can be generated using a list of values.
<div class="flex flex-column gap-3">
<div *ngFor="let category of categories" class="field-checkbox">
<p-radioButton [inputId]="category.key" name="category" [value]="category" [(ngModel)]="selectedCategory"></p-radioButton>
<label [for]="category.key" class="ml-2">{{ category.name }}</label>
</div>
</div>
RadioButton can also be used with reactive forms. In this case, the formControlName property is used to bind the component to a form control.
<form class="flex flex-column gap-3" [formGroup]="formGroup">
<div *ngFor="let category of categories" class="field-checkbox">
<p-radioButton [inputId]="category.key" [value]="category" formControlName="selectedCategory"></p-radioButton>
<label [for]="category.key" class="ml-2">{{ category.name }}</label>
</div>
</form>
Invalid state style is added using the ng-invalid and ng-dirty class to indicate a failed validation.
<p-radioButton class="ng-invalid ng-dirty"></p-radioButton>
When disabled is present, the element cannot be edited and focused.
<p-radioButton [disabled]="true"></p-radioButton>
Following is the list of structural style classes, for theming classes visit theming page.
Name | Element |
---|---|
p-radiobutton | Container element |
p-radiobutton-box | Container of icon. |
p-radiobutton-icon | Icon element. |
p-checkbox-label | Label element. |
p-label-active | Label element of a checked state. |
p-label-focus | Label element of a focused state. |
p-label-disabled | Label element of a disabled state. |
RadioButton component uses a hidden native radio button element internally that is only visible to screen readers. Value to describe the component can either be provided via label tag combined with inputId prop or using aria-labelledby, aria-label props.
<label for="rb1">One</label>
<p-radioButton inputId="rb1"></p-radioButton>
<span id="rb2">Two</span>
<p-radioButton aria-labelledby="rb2"></p-radioButton>
<p-radioButton aria-label="Three"></p-radioButton>
Key | Function |
---|---|
tab | Moves focus to the checked radio button, if there is none within the group then first radio button receives the focus. |
left arrowup arrow | Moves focus to the previous radio button, if there is none then last radio button receives the focus. |
right arrowdown arrow | Moves focus to the next radio button, if there is none then first radio button receives the focus. |
space | If the focused radio button is unchecked, changes the state to checked. |
API defines helper props, events and others for the PrimeNG RadioButton module.
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. |
ariaLabelledBy | string | null | Establishes relationships between the component and label(s) where its value should be one or more element IDs. |
ariaLabel | string | null | Used to define a string that labels the input element. |
style | object | null | Inline style of the component. |
styleClass | string | null | Style class of the component. |
labelStyleClass | string | null | Style class of the label. |
Name | Parameters | Description |
---|---|---|
onClick | event.originalEvent: Click event event.value: Value of the radio button | 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. |
Name | Parameters | Description |
---|---|---|
focus | - | Applies focus. |