| allowClear | - | boolean |
Enables the clearing upon clicking the selected item again. |
| ariaLabel5.20.0+ | (value: number, itemCount: number) => `${value} of ${itemCount}` | (value: number, itemCount: number) => string |
A function that returns the accessible label (aria-label) for each rating item's radio input. Receives the item's value and the total item count. |
| disabled | - | boolean |
Toggle the disabled state for the component. |
| highlightOnlySelected | - | boolean |
If enabled, only the currently selected icon will be visibly highlighted. |
| itemCount | 5 | number |
Specifies the total number of stars to be displayed in the star rating component. This property determines the scale of the rating, such as out of 5 stars, 10 stars, etc. |
| modelValue | - | number |
The rating's value, bound with v-model. |
| name | - | string |
Name shared by the radio inputs. Radios need one name to work as a single group, so the component generates one when you leave it out, and the value then reaches the form under a generated key that is different on every render. Name it to decide that key yourself, and give each rating on the page its own name: two ratings sharing one become a single group, so picking a star in one clears the other and the form carries a single value. A rating with nothing selected submits nothing either way, and a read-only one uses only the name you give it, so without one it submits nothing. |
| precision | 1 | number |
Minimum increment value change allowed. |
| readOnly | - | boolean |
Makes the rating read-only: the value cannot be changed and only the checked star takes focus, or the first star while no star is checked. The value is submitted under name, and not at all without one. |
| required6.0.0+ | - | boolean |
Makes every radio required, so the form is not submitted while no star is picked, and sets aria-required on the rating. A read-only rating is never required. |
| size | - | string |
Size the component small, large, or custom if you define custom icons with custom height. |
| tooltips | - | boolean, string[] |
Enable tooltips with default values or set specific labels for each icon. A read-only rating shows none. |
| validationState6.0.0+ | - | string |
The validation state, rendered as the is-{state} class on the rating; 'invalid' also sets aria-invalid on the rating and blocks the submit. Any custom state declared in the $form-validation-states Sass map is accepted. The user's next pick of a star emits update:validationState with undefined. |
| value | - | number |
The rating's value when modelValue isn't set — tracked reactively until a click or modelValue takes over. |
