📄 primeng/rating

File: rating.md | Updated: 11/15/2025

Source: https://primeng.org/rating

  • Primary

    Surface

    PresetsAuraMaterialLaraNora

    Ripple

    RTL

  • v20

  • FEATURES

  • API

  • THEMING

  • PASSTHROUGH

Rating

Rating component is a star based selection input.

Import #

import { RatingModule } from 'primeng/rating';

Basic #

Two-way value binding is defined using ngModel.

<p-rating [(ngModel)]="value" />

Number of Stars #

Number of stars to display is defined with stars property.

<p-rating [(ngModel)]="value" [stars]="10" />

Template #

Templating allows customizing the content where the icon instance is available as the implicit variable.

<p-rating [(ngModel)]="value"> <ng-template #onicon> <img src="https://primefaces.org/cdn/primeng/images/demo/rating/custom-icon-active.png" height="24" width="24" /> </ng-template> <ng-template #officon> <img src="https://primefaces.org/cdn/primeng/images/demo/rating/custom-icon.png" height="24" width="24" /> </ng-template> </p-rating>

Readonly #

When readonly present, value cannot be edited.

<p-rating [(ngModel)]="value" [readonly]="true" />

Disabled #

When disabled is present, a visual hint is applied to indicate that the Knob cannot be interacted with.

<p-rating [(ngModel)]="value" [disabled]="true" />

Forms #

Template Driven

Submit

<form #exampleForm="ngForm" (ngSubmit)="onSubmit(exampleForm)" class="flex flex-col gap-4 w-40"> <div class="flex flex-col items-center gap-2"> <p-rating #ratingValue="ngModel" [(ngModel)]="value" required name="ratingValue" [invalid]="ratingValue.invalid && (ratingValue.touched || exampleForm.submitted)"/> @if (ratingValue.invalid && (ratingValue.touched || exampleForm.submitted)) { <p-message severity="error" size="small" variant="simple">Value is required.</p-message> } </div> <button pButton severity="secondary" type="submit"><span pButtonLabel>Submit</span></button> </form>

Reactive Forms

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

Submit

<form [formGroup]="exampleForm" (ngSubmit)="onSubmit()" class="flex flex-col gap-4 w-40"> <div class="flex flex-col items-center gap-2"> <p-rating formControlName="ratingValue" [invalid]="isInvalid('ratingValue')"/> @if (isInvalid('ratingValue')) { <p-message severity="error" size="small" variant="simple">Value is required.</p-message> } </div> <button pButton severity="secondary" type="submit"><span pButtonLabel>Submit</span></button> </form>

Accessibility #

Screen Reader

Rating component internally uses radio buttons that are only visible to screen readers. The value to read for item is retrieved from the locale API via star and stars of the aria property.

Keyboard Support

Keyboard interaction is derived from the native browser handling of radio buttons in a group.

| Key | Function | | --- | --- | | tab | Moves focus to the star representing the value, if there is none then first star receives the focus. | | left arrow__up arrow | Moves focus to the previous star, if there is none then last radio button receives the focus. | | right arrow__down arrow | Moves focus to the next star, if there is none then first star receives the focus. | | space | If the focused star does not represent the value, changes the value to the star value. |

  • Import

  • Basic

  • Number of Stars

  • Template

  • Readonly

  • Disabled

  • Forms

    • Template Driven

    • Reactive Forms

  • Accessibility

Theme Designer

Theme Designer is the ultimate tool to customize and design your own themes featuring a visual editor, figma to theme code, cloud storage, and migration assistant.

PrimeNG 20.3.0 by PrimeTek