Source: https://primereact.org/rating/

Introducing PrimeReact v11 Alpha 🥁Learn More

SearchK
10.9.7
FEATURES
API
THEMING
PASS THROUGH

Rating

Rating component is a star based selection input.

Import#

import { Rating } from 'primereact/rating';

Copy

Basic#

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

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

Copy

Without Cancel#

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} />

Copy

Number of Stars#

Number of stars to display is defined with stars property.

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

Copy

Template#

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

<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" />}
/>

Copy

ReadOnly#

When readOnly present, value cannot be edited.

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

Copy

Disabled#

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

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

Copy

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
Without Cancel
Number of Stars
Template
ReadOnly
Disabled
Accessibility

PrimeReact 10.9.7 by PrimeTek