Source: https://primeng.org/radiobutton

• Primary

  Surface

  PresetsAuraMaterialLaraNora

  Ripple

  RTL

• v20

  • v20

  • v19

  • v18

  • v17

• FEATURES

• API

• THEMING

• PASSTHROUGH

RadioButton

RadioButton is an extension to standard radio button element with theming.

Import #

import { RadioButtonModule } from 'primeng/radiobutton';

Group #

RadioButton is used as a controlled input with value and ngModel properties.

Cheese

Mushroom

Pepper

Onion

<div class="flex flex-wrap gap-4"> <div class="flex items-center"> <p-radiobutton name="pizza" value="Cheese" [(ngModel)]="ingredient" inputId="ingredient1" /> <label for="ingredient1" class="ml-2">Cheese</label> </div>

    <div class="flex items-center">
        <p-radiobutton name="pizza" value="Mushroom" [(ngModel)]="ingredient" inputId="ingredient2" />
        <label for="ingredient2" class="ml-2">Mushroom</label>
    </div>

    <div class="flex items-center">
        <p-radiobutton name="pizza" value="Pepper" [(ngModel)]="ingredient" inputId="ingredient3" />
        <label for="ingredient3" class="ml-2">Pepper</label>
    </div>

    <div class="flex items-center">
        <p-radiobutton name="pizza" value="Onion" [(ngModel)]="ingredient" inputId="ingredient4" />
        <label for="ingredient4" class="ml-2">Onion</label>
    </div>
</div>

Dynamic #

RadioButtons can be generated using a list of values.

Accounting

Marketing

Production

Research

<div class="flex flex-col gap-4"> <div *ngFor="let category of categories" class="field-checkbox"> <p-radiobutton [inputId]="category.key" name="category" [value]="category" [(ngModel)]="selectedCategory" /> <label [for]="category.key" class="ml-2">{{ category.name }}</label> </div> </div>

Filled #

Specify the variant property as filled to display the component with a higher visual emphasis than the default outlined style.

<p-radiobutton [(ngModel)]="checked" variant="filled" />

Sizes #

RadioButton provides small and large sizes as alternatives to the base.

Small

Normal

Large

<div class="flex flex-wrap gap-4"> <div class="flex items-center gap-2"> <p-radiobutton [(ngModel)]="size" inputId="size_small" name="size" value="Small" size="small" /> <label for="size_small" class="text-sm">Small</label> </div> <div class="flex items-center gap-2"> <p-radiobutton [(ngModel)]="size" inputId="size_normal" name="size" value="Normal" /> <label for="size_normal">Normal</label> </div> <div class="flex items-center gap-2"> <p-radiobutton [(ngModel)]="size" inputId="size_large" name="size" value="Large" size="large" /> <label for="size_large" class="text-lg">Large</label> </div> </div>

Disabled #

When disabled is present, the element cannot be edited and focused.

<p-radiobutton [(ngModel)]="value" [value]="1" [disabled]="true" /> <p-radiobutton [(ngModel)]="value" [value]="2" [disabled]="true" />

Invalid #

The invalid state is applied using the ⁠invalid property to indicate failed validation, which can be integrated with Angular Forms.

<p-radiobutton [(ngModel)]="value" [invalid]="!value" />

Forms #

Template Driven

Cheese

Mushroom

Pepper

Onion

Submit

<form #exampleForm="ngForm" (ngSubmit)="onSubmit(exampleForm)" class="flex flex-col gap-4"> <div class="flex flex-wrap gap-4"> @for (category of categories; track category.name) { <div class="flex items-center gap-2"> <p-radiobutton [(ngModel)]="ingredient" [inputId]="category.key" [value]="category" [invalid]="isInvalid(exampleForm)" name="ingredient" /> <label [for]="category.key"> {{ category.name }} </label> </div> } </div> @if (isInvalid(exampleForm)) { <p-message severity="error" size="small" variant="simple"> At least one ingredient must be selected. </p-message> }

    <button pButton severity="secondary" type="submit">
        <span pButtonLabel>Submit</span>
    </button>
</form>

Reactive Forms

RadioButton can also be used with reactive forms. In this case, the formControlName property is used to bind the component to a form control.

Cheese

Mushroom

Pepper

Onion

Submit

<form [formGroup]="exampleForm" (ngSubmit)="onSubmit()" class="flex flex-col gap-4"> <div class="flex flex-wrap gap-4"> @for (category of categories; track category) { <div class="flex items-center gap-2"> <p-radiobutton formControlName="selectedCategory" name="selectedCategory" [inputId]="category.key" [value]="category" [invalid]="isInvalid('selectedCategory')" /> <label [for]="category.key"> {{ category.name }} </label> </div> } </div> @if (isInvalid('selectedCategory')) { <p-message severity="error" size="small" variant="simple"> At least one ingredient must be selected. </p-message> } <button pButton severity="secondary" type="submit"> <span pButtonLabel>Submit</span> </button> </form>

Accessibility #

Screen Reader

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 ariaLabelledBy, ariaLabel props.

<label for="rb1">One</label> <p-radiobutton inputId="rb1" />

<span id="rb2">Two</span>
<p-radiobutton ariaLabelledBy="rb2" />

<p-radiobutton ariaLabel="Three" />

Keyboard Support

| 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 arrow__up arrow | Moves focus to the previous radio button, if there is none then last radio button receives the focus. | | right arrow__down 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. |

• Import

• Group

• Dynamic

• Filled

• Sizes

• Disabled

• Invalid

• Forms

  • Template Driven

  • Reactive Forms

• Accessibility

Templates

Highly customizable application templates to get started in no time with style. Designed and implemented by PrimeTek.

PrimeNG 20.3.0 by PrimeTek