Other
Rating
One to five stars with words beside them: "4 of 5, Great".
Props
| Prop | Type | Description |
|---|---|---|
labelRequired | string | |
value | number | null | |
onChange | (value: number | null) => void | |
readOnly | boolean | |
size | 'S' | 'M' | 'L' | |
words | string[] | The five words, lowest first. Default: Poor, Fair, Good, Great, Excellent. |
emptyLabel | string | Default: "Not rated". |
hideWords | boolean | |
className | string |
Guidelines
One to five stars with words beside them: "4 of 5, Great". Used for how working with a brand went.
Provide: label (what's rated, for screen readers) and value (1 to 5, or nothing). Optional onChange, readOnly, size, words (default Poor, Fair, Good, Great, Excellent), emptyLabel (default "Not rated") and hideWords.
- It's a radio group: Tab reaches it once and arrow keys change the rating. Picking the current star again does nothing; a small Clear button beside the words removes the rating, so a stray click or Space never wipes it.
- The words are always there unless the rating sits beside its own words (
hideWords), so it's never the stars alone. - Stars are drawn in the accent text color, empty ones in the subdued gray: both hold 3:1 on any surface, light and dark.
- Read only (a brand card), it shows the stars and words with no buttons.
- Pair it with a note field for why, in plain words. Never a gradient, never yellow-only stars.