Interactive — click stars to set

Hover preview, click-active-star to clear

ShowValue renders the numeric value next to the stars.

0

Selected: 0 (click the active star to clear)

razor
<Rating Value="@_rating" ValueChanged="@((decimal v) => _rating = v)" ShowValue="true" />

Read-only — fractional averages

Half- and quarter-stars are rendered correctly

Use ReadOnly="true" for displaying aggregate scores like product ratings.

4.0 stars
4.5 stars
3.7 stars
razor
<Rating Value="4.0m" ReadOnly="true" /> <Rating Value="4.5m" ReadOnly="true" /> <Rating Value="3.7m" ReadOnly="true" ShowValue="true" />

Sizes

sm / md / lg / xl

sm
md
lg
xl
razor
<Rating Value="4m" ReadOnly="true" Size="sm" /> <Rating Value="4m" ReadOnly="true" Size="md" /> <Rating Value="4m" ReadOnly="true" Size="lg" /> <Rating Value="4m" ReadOnly="true" Size="xl" />

Custom max — 10-point scale

Set Max="10" for non-five-star scales

7
razor
<Rating Value="@_score" ValueChanged="@((decimal v) => _score = v)" Max="10" ShowValue="true" />
An unhandled error has occurred. Reload 🗙

Rejoining the server...

Rejoin failed... trying again in seconds.

Failed to rejoin.
Please retry or reload the page.

The session has been paused by the server.

Failed to resume the session.
Please retry or reload the page.