Rating

Rating component is a star based selection input.


import { Rating } from 'primereact/rating';
         

Rating is used a controlled input component with value and onChange properties.


<Rating value={value} onChange={(e) => setValue(e.value)} />
         

A cancel icon is displayed to reset the value by default, set cancel as false to remove this option.


<Rating value={value} onChange={(e) => setValue(e.value)} cancel={false} />
         

Number of stars to display is defined with stars property.


<Rating value={value} onChange={(e) => setValue(e.value)} stars={10} />
         

Custom icons are used to override the default icons with onIcon, offIcon and cancelIcon properties.

custom-cancel-image
custom-image
custom-image
custom-image
custom-image
custom-image

<Rating value={value} onChange={(e) => setValue(e.value)}
    cancelIcon={<img src="/images/rating/cancel.png" alt="custom-cancel-image" width="25px" height="25px" />}
    onIcon={<img src="/images/rating/custom-icon-active.png" alt="custom-image-active" width="25px" height="25px" />}
    offIcon={<img src="/images/rating/custom-icon.png" alt="custom-image" width="25px" height="25px" />}
/>
 

When readOnly present, value cannot be edited.


<Rating value={5} readOnly cancel={false} />
         

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


<Rating value={5} disabled cancel={false} />
         

Following is the list of structural style classes

NameElement
p-ratingContainer element
p-rating-itemEach item element
p-rating-item-activeSelected item elements.
p-rating-cancel-itemCancel item element.
Accessibility guide documents the specification of this component based on WCAG guidelines, the implementation is in progress.

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.

KeyFunction
tabMoves focus to the star representing the value, if there is none then first star receives the focus.
left arrowup arrowMoves focus to the previous star, if there is none then last radio button receives the focus.
right arrowdown arrowMoves focus to the next star, if there is none then first star receives the focus.
spaceIf the focused star does not represent the value, changes the value to the star value.
Visit the API documentation for detailed information about all the properties, events and methods of the component.