import Rating from 'primevue/rating';
<script src="https://unpkg.com/primevue@^3/core/core.min.js"></script>
<script src="https://unpkg.com/primevue@^3/rating/rating.min.js"></script>
Two-way value binding is defined using v-model.
<Rating v-model="val" />
Number of stars to display is defined with stars property, default is 5.
<Rating v-model="val" :stars="7"/>
A cancel icon is displayed to reset the value by default, set cancel as false to remove this option.
<Rating v-model="val" :cancel="false" />
Templating allows customizing the content where the icon instance is available as the implicit variable.
<Rating :modelValue="3">
<template #cancelicon>
<img src="/demo/images/rating/cancel.png" height="24" width="24">
</template>
<template #onicon>
<img src="/demo/images/rating/custom-onicon.png" height="24" width="24">
</template>
<template #officon>
<img src="/demo/images/rating/custom-officon.png" height="24" width="24">
</template>
</Rating>
Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.
| Name | Type | Default | Description |
|---|---|---|---|
| modelValue | number | null | Value of the rating. |
| disabled | boolean | false | When present, it specifies that the element should be disabled. |
| readonly | boolean | false | When present, it specifies that component is read-only. |
| stars | number | 5 | Number of stars. |
| cancel | boolean | true | When specified a cancel icon is displayed to allow clearing the value. |
| onIcon | string | pi pi-star | Icon for the on state. |
| offIcon | string | pi pi-star-fill | Icon for the off state. |
| cancelIcon | string | pi pi-ban | Icon for the cancelable state. |
| Name | Parameters | Description |
|---|---|---|
| change |
event.originalEvent: Original event event.value: Selected option value |
Callback to invoke on value change. |
| focus | event | Callback to invoke when the component receives focus. |
| blur | event | Callback to invoke when the component loses focus. |
| Name | Parameters |
|---|---|
| cancelicon | - |
| onicon | value: Item value |
| officon | value: Item value |
Following is the list of structural style classes, for theming classes visit
| Name | Element |
|---|---|
| p-rating | Container element |
| p-rating-item | Each item element |
| p-rating-item-active | Selected item elements. |
| p-rating-cancel-item | Cancel item element. |
Rating component internally uses radio buttons that are only visible to screen readers. The value to read for item is retrieved from the
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. |
None.