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" />
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. |
| name | string | null | Name of the element. |
| 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. |
| Name | Parameters | Description |
|---|---|---|
| change |
event.originalEvent: Original event event.value: Selected option value |
Callback to invoke on value change. |
Following is the list of structural style classes, for theming classes visit
| Name | Element |
|---|---|
| p-rating | Container element |
| p-rating-star | Star element |
| p-rating-star-on | Selected star element. |
| p-rating-cancel | Cancel icon. |
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.