Rating
Collect and show ratings. Rating is a star rating (read only average or input, half stars). NpsScale is the 0 to 10 Net Promoter question with band colours. SentimentRating is one-tap feedback as thumbs or five faces. RatingSummary is the average with a 5 to 1 breakdown, optionally filterable.
// Plain markup
import { Rating } from "@shavin/ui";Average on a product
4.6(34)
Component Source
<Rating readOnly value={4.6} showValue count={34} />Collect a rating, half stars
3.5
Component Source
<Rating precision="half" size="lg" value={stars} onValueChange={setStars} showValue />NPS question
Not at all likelyExtremely likely
Sample of nine answers scores 33 (5 promoters, 2 passives, 2 detractors) with calculateNps.
Component Source
<NpsScale value={nps} onValueChange={setNps} />Thumbs and faces
Component Source
<SentimentRating />
<SentimentRating variant="faces" />Review summary, filterable
4.6
183 reviews
Component Source
<RatingSummary counts={[2, 3, 9, 41, 128]} onSelect={setFilter} selected={filter} />Rating props
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | — | Current value, 0 to `max`. Fractions render as partly filled stars (4.5, 4.2…). |
| defaultValue | number | — | — |
| onValueChange | (value: number) => void | — | — |
| max | number | 5 | Number of stars. @default 5 |
| precision | "full" | "half" | full | Input step. `half` lets people pick 3.5. Display always shows any fraction. @default "full" |
| readOnly | boolean | — | Display only: no focus, no pointer, announced as an image. |
| disabled | boolean | — | — |
| showValue | boolean | — | Show the number next to the stars, for example "4.8". |
| count | number | — | Review count shown in brackets, for example "(34)". |
| label | string | Rating | Accessible name for the interactive control. @default "Rating" |
| tone | "accent" | "warning" | "success" | "accent" | — |
| size | "sm" | "md" | "lg" | "md" | — |
NpsScale props
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | null | — | 0 to 10, or null for no answer. |
| defaultValue | number | null | — | — |
| onValueChange | (value: number) => void | — | — |
| lowLabel | string | Not | Label under the left end. @default "Not at all likely" |
| highLabel | string | Extremely | Label under the right end. @default "Extremely likely" |
| size | "sm" | "md" | "lg" | "md" | — |
| readOnly | boolean | — | — |
| disabled | boolean | — | — |
| label | string | How | Accessible name. @default "How likely are you to recommend us, from 0 to 10?" |
| band | "detractor" | "passive" | "promoter" | — | — |
| selected | "true" | "false" | "false" | — |
SentimentRating props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "thumbs" | "faces" | — | `thumbs`: value 1 is up, -1 is down. `faces`: value 1 (very unhappy) to 5 (very happy). |
| value | number | null | — | — |
| defaultValue | number | null | — | — |
| onValueChange | (value: number) => void | — | — |
| size | "sm" | "md" | "lg" | "md" | — |
| disabled | boolean | — | — |
| label | string | How | Accessible name. @default "How was it?" |
| selected | "true" | "false" | "false" | — |
RatingSummary props
| Prop | Type | Default | Description |
|---|---|---|---|
| counts* | number[] | — | How many ratings each star level got, from 1 star up: `[2, 1, 4, 20, 55]`. Average and total are derived from it. |
| average | number | — | Overrides the computed average (for example when it comes from your backend). |
| onSelect | (stars: number) => void | — | Makes each row a button that reports its star level, for filtering reviews. |
| selected | number | null | — | The star level currently filtered, highlighted. |
| noun | string | reviews | Noun for the total line. @default "reviews" |
* required