Rating Group
A row of stars for choosing or showing a rating. The arrow keys move the rating one star at a time, and pointing at a star previews it. Name it with aria-label; readonly turns it into a display of a score. Built on the bits-ui RatingGroup.
Choosing a rating
Click a star, or focus the row and use the arrow keys. Pointing at a star previews it. Name the row with aria-label.
3 of 5
<div class="space-y-2">
<RatingGroup bind:value={rating} aria-label="Your rating" />
<p class="text-muted text-xs">{rating} of 5</p>
</div>Showing a score
readonly turns it into a display, such as a product's rounded average.
4.4 · 128 reviews
<div class="flex items-center gap-2 text-sm">
<RatingGroup value={4} readonly aria-label="Average rating" />
<span class="text-muted">4.4 · 128 reviews</span>
</div>API
| Prop | Type | Default | Description |
|---|---|---|---|
value bindable | number | 0 | The rating. Two-way bindable via |
max | number | Number of stars (forwarded via | |
readonly | boolean | Shows the rating without letting it change (forwarded via | |
onValueChange | (value: number) => void | Called when the rating changes (forwarded via | |
aria-valuetext | string | ((value: number, max: number) => string) | How the rating is read out (forwarded via | |
class | string | Additional Tailwind classes merged onto the row. |