Form
Input Rating
Star rating input for capturing review scores and ratings.
Overview
InputRating is the star-rating input used inside ReviewForm and any rating-capture flow. Wrap it in <LField> to surface validation messages when the user submits without a rating.
For display-only ratings, reach for StarsRating (graphic only) or RatingSummary (graphic plus review count). For the per-star distribution bars in a review section, see RatingProgressBarFilter.
Key Business & UX Benefits
- A familiar star pattern lets shoppers leave a rating in one tap, which drives the volume of UGC needed to lift product page conversion.
- Wrapping in
<LField>surfaces the parent Field'serrorMessagewhen a rating is missing, so customers see why the form failed instead of guessing. - Reusing the same control inside
ReviewFormand standalone rating flows keeps the visual signal consistent everywhere shoppers see ratings.
Usage
InputRating Default
<Field label="Rating" required>
<InputRating v-model="rating" :max-rating="5" />
</Field>
Feature List
- `maxRating` prop (default 5) sets the number of stars, so 5-, 10-, or N-star scales come from one component
- `size` prop drives both star icon and label size, keeping the rating proportional to the surrounding form chrome
- Numeric v-model from 0 to `maxRating`, so consumers store the score as a plain number
- Localized helper text via `$tl('inputRating.label')` keeps the field's accessible label correct in every market
- Wraps cleanly in `<LField>`, so 'rating required' errors surface inline rather than failing silently
API Reference
| Prop | Default | Type |
|---|---|---|
modelValue | 0 | number |
maxRating | 5 | number |
size | m | InputRatingSize ("s" | "m" | "l" | "sm") |
color | yellow | InputRatingColor ("primary" | "accent" | "yellow" | "black") |
disabled | false | boolean |
required | false | boolean |
invalid | false | boolean |
id | string |
| Event | Type |
|---|---|
update:modelValue | (event: "update:modelValue", value: number): void |