Rating
Stars, read-only by default. Passing onChange turns it into an input — the same component, because a review form and a review listing must not disagree about what 4.5 looks like.
import Rating from '@/components/ui/Rating';Source: src/components/ui/Rating.tsx
Examples
Fractions render as partial stars
Sizes
Props
<Rating> props
| Prop | Type | Default | Description |
|---|---|---|---|
valuerequired | number | — | — |
max | number | 5 | — |
size | 'sm' | 'md' | 'lg' | 'md' | — |
onChange | (value: number) => void | — | Providing onChange makes the stars clickable (whole stars only). |
className | string | '' | — |
Accessibility
- Read-only: the value is exposed as text, not as five images.
- With onChange it becomes a radio group — arrow keys move between stars, and each has a label.
Usage
Do
- Show the review count next to it; a bare 5.0 from one review is misleading.
Don’t
- Don’t round a 4.4 up to 4.5 for display — the partial star exists so you don’t have to.
Related:Progress