Stars for ratings. StarRating shows a value read-only: one role="img" named “Rated 4.5 out of 5”, half (or tenth) fills that start from the inline start, an optional average and review count (as a link to the reviews). StarRatingInput asks for one: a native radio group in a fieldset with a legend, one tab stop and arrow keys, every radio named (“4 stars”, “4.5 stars” with half steps), and it posts with the form. Hover and checked fills are CSS; there is no JS unless you pass onValueChange.
Installation
The whole kit as one package — get updates by bumping the version. Add the styles to globals.css: @import "@vamos-ui/react/styles.css";
Usage
import { StarRating, StarRatingInput } from "@vamos-ui/react/blocks";
<StarRating value={4.6} showValue count={128} countHref="#reviews" />
<form action={saveReview}>
<StarRatingInput name="rating" label="How would you rate it?" allowHalf required />
</form>Half steps halve the click target of each radio; keep size="lg" when you use allowHalf on touch screens.
The stars are monochrome (text-fg). Set a colour with className on StarRating, e.g. text-accent-ink.
Examples
Input (controlled)
value + onValueChange; the legend is the question, the description sits under it.
Half steps, sizes, disabled
allowHalf puts two radios on each star. Uncontrolled with defaultValue; disabled disables the fieldset.
Turkish, German, Arabic (RTL)
commerceLabelsTr / De / Fr / Es / Ar; numbers follow the locale.
API
StarRating
| Prop | Type | Default |
|---|---|---|
valueThe rating; clamped to 0…max. The label keeps one decimal. | number | — |
maxNumber of stars. | number | 5 |
stepFill precision (half stars by default). | 0.1 | 0.5 | 1 | 0.5 |
sizeStar size and text size. | "sm" | "md" | "lg" | "md" |
showValueAverage as text after the stars. | boolean | — |
count / countHref“128 reviews”, as a link when countHref is set. | number / string | — |
labelOverrides “Rated {rating} out of {max}”. | string | — |
labels / locale / componentsStrings, number format, Link adapter. | Partial<CommerceLabels> / string / BlockAdapters | — |
StarRatingInput
| Prop | Type | Default |
|---|---|---|
nameForm field name (default: an auto id). | string | — |
value / defaultValue / onValueChangeControlled or uncontrolled. 0 = no rating. | number / number / (v: number) => void | — |
allowHalfHalf-star steps: two radios per star. | boolean | — |
maxNumber of stars. | number | 5 |
size24 / 32 / 40px stars. | "sm" | "md" | "lg" | "md" |
label / hideLabel / descriptionThe legend (default “Rating”), visually hidden or not, and a hint under it. | ReactNode / boolean / ReactNode | — |
required / disabled / form / idNative form attributes. | boolean / boolean / string / string | — |