Rating
Star rating for displaying averages or capturing input. Read-only is the
default — it supports half-step precision for displays of averaged values
like 4.7. Interactive ratings step in whole units; half-step input is
uncommon UX and the radiogroup keyboard model doesn't map cleanly to it.
Default#
Loading…
Half-precision (read-only)#
Loading…
Interactive#
Click a star or use Arrow keys / Home / End to set the rating.
Loading…
Sizes#
Loading…
With trip count#
A common composition — pair the stars with the numeric value and a review count.
Loading…
Custom color#
Pass any CSS color via the color prop to override the filled-star color (defaults to --color-rating). Empty stars dim via opacity when an override is active so the filled/empty contrast is preserved. Invalid colors fall back to the default; in dev, a console.warn names the offending value.
Loading…
Props#
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | undefined | — | Current rating (controlled). Range `0` … `max`. |
| defaultValue | number | undefined | — | Default rating (uncontrolled). |
| onValueChange | ((value: number) => void) | undefined | — | Fires with the new whole-number rating on click / keyboard select. |
| max | number | undefined | 5 | Maximum number of stars. Default `5`. |
| precision | enum | full | Fractional precision for **read-only** display. Interactive ratings always step in whole units. Default `'full'`. |
| size | enum | md | Visual size. Default `'md'`. |
| readOnly | boolean | undefined | false | When true, renders a non-interactive display (`role='img'`). |
| aria-label | string | undefined | — | Accessible label. For read-only this overrides the auto-generated "X out of Y stars" label. |
| color | string | undefined | — | Override the filled-star color. Accepts any CSS color. |
Accessibility#
- Read-only renders as
role="img"with an auto-generatedaria-label("4.7 out of 5 stars"). Override via thearia-labelprop. - Interactive renders as
role="radiogroup"with onerole="radio"button per star. Only the selected (or first, when value is0) button is in the tab order — Arrow keys move and select; Home / End jump. - Pass
aria-labelto the interactive group to describe what is being rated ("Rate your host", "Rate this stay").