RatingScale
How something was, 1 to 5: one row, the two ends named either side of five chips, the chosen one solid ink. The feedback page's.
States
Pick one
1 · Poor5 · Great
Chosen, waiting
1 · Poor5 · Great
import { RatingScale } from "@/components/shared/rating-scale";
<RatingScale
value={rating}
labels={{ group: "How was your visit?", low: "Poor", high: "Great" }}
onPick={rate}
/>Guidelines
- Numbers, not stars or faces: the same in every language, and what the email's buttons said.
- Name both ends, beside them in the same row, so 1 and 5 can't be read the wrong way round.
- The chosen one is solid ink, unmistakable; every chip shows the pointer, since a rating can always be changed.
API
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | null | — | The chosen rating; null before one. |
| labels | { group, low, high } | — | The question, as a screen reader names the group, and the two ends' names. |
| onPick | (rating: number) => void | — | A chip tapped, 1 to 5. |
| disabled | boolean | false | While a pick is on its way: the chips wait. |