Forms
VeeRating
A rating component that uses the composition API provided by Vee-Validate to perform validation.
Source code
Click to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.
Installation
Usage
UiVeeRating wraps UiRating with a label, hint and animated error message, and registers the value with the surrounding Vee-Validate form. It is always editable. Any other prop (max-rating, step, clearable, icon, size, show-value, filled-icon-class-name, ...) is forwarded to UiRating.
Basic example
A rating starts at 0 (nothing selected). Validate it with min(1) (or min(0.5) when using half stars) to make it required. The required prop only adds the asterisk and aria-required; the schema is what enforces it.
Default value
Use v-model or initialValues to set an initial rating. Set step to 0.5 to allow half stars.
Clearable and custom icon
Set clearable to let users click the current value again to reset it to 0. This is useful for optional ratings. Use icon, size and the *-class-name props to restyle the stars.
Disabled
Ratings can no longer be changed after 30 days.
Review form
Props
| Prop | Type | Description |
|---|---|---|
name | string | Field name registered with Vee-Validate. Falls back to a generated id. |
label | string | Label shown above the rating. |
label-hint | string | Extra hint shown next to the label. |
hint | string | Helper text. Hidden while there is an error. |
rules | any | Vee-Validate rules (or use a schema on useForm). |
v-model | number | Current rating. |
required | boolean | Shows the required asterisk and sets aria-required. |
disabled | boolean | Prevents interaction. |
validate-on-mount | boolean | Validates as soon as the field mounts. |
class | HTMLAttributes["class"] | Classes for the wrapper element. |
The label, hint and errorMessage slots are available for custom markup and receive error-message and value.
Accessibility
The rating is exposed as a labelled group containing a radio group, so it supports keyboard navigation (Tab to focus, arrow keys to move between stars, Space to select). The label, hint and error message are linked with aria-labelledby and aria-describedby, and the group is marked aria-invalid when validation fails. The field is marked as touched once focus leaves the rating. Like the other Vee components, errors are shown after a value change or on submit.