Rating
Renders a star-rating widget as a div[role="radiogroup"] of hidden radio inputs with styled SVG star labels. Supports read-only display, configurable count, fractional selection, and custom colors.
Default
<Rating value={3} />Read-only display
<Rating value={1} readOnly />
<Rating value={3} readOnly />
<Rating value={5} readOnly />Custom count
<Rating count={3} value={2} />
<Rating count={10} value={7} />Colors and sizes
<Rating value={4} color="yellow" />
<Rating value={4} color="orange" />
<Rating value={3} size="xs" readOnly />
<Rating value={3} size="xl" readOnly />Disabled
<Rating value={3} disabled />Props
| Prop | Type | Default | Description |
|---|---|---|---|
count | number | 5 | Total number of rating symbols |
value | number | 0 | Currently selected rating value |
name | string | auto | Name shared by all radio inputs; auto-generated if omitted |
color | string | — | Accent color applied to filled symbols |
size | 'xs'|'sm'|'md'|'lg'|'xl' | — | Visual size of the rating symbols |
readOnly | boolean | false | Disables inputs while keeping normal appearance |
disabled | boolean | false | Disables inputs and dims the widget |
fractions | number | — | Number of selectable fractions per symbol |
emptySymbol | string | star SVG | SVG/HTML string for unfilled symbols |
fullSymbol | string | star SVG | SVG/HTML string for filled symbols |
class | string | — | Additional CSS class names |
style | object | — | Inline styles |