EXTENDED UI

Star Ratings

Rate work, show scores and collect client feedback — with mouse, touch and keyboard.
THEME
01

Playground

Icon, step, mode, size, colour and label
★★★★★★★★★★
Hover and click to rate
Click it, then use ← → Home End · 0 clears
<Rating value={rating} onChange={setRating} icon="star" step={1} size="M" color="gold" showLabel="words" aria-label="Rate this project" />
Settings
ICON
STEP
MODE
SIZE · COLOUR
LABEL
02

Patterns

Summaries, reviews, follow-ups, criteria, NPS and tables
Review summaryclick a bar to filter
4.5126 reviews
Latest reviews
Lena Holm★★★★★2 d
Beautiful work and so calm on set. The Mývatn frames are the best we’ve had.
↳ Avava: Thank you Lena — see you in spring!
Jonas Berg★★★★☆1 w
Great lookbook. Delivery slipped two days but they kept us posted.
Marco Ruiz★★★★★2 w
The glaze close-ups sell the product on their own.
After deliveryrate → follow-up → thanks
How did Spring 27 go?
★★★★★★★★★★
Tap a star
By criteriaaverage updates live
Quality
★★★★★★★★★★
5
Timing
★★★★★★★★★★
4
Communication
★★★★★★★★★★
5
Budget
★★★★★★★★★★
4
Overall4.5/ 5
NPS 0–10would you recommend Avava?
Not likelyVery likely
Pick 0–10
In a tablecompact · sort by rating
PHOTOGRAPHERJOBS
Alex Reyes
4.9
38
Sara Ortiz
4.8
31
Jon Reyes
4.6
27
Leo Park
4.2
19
Freelancer · Nina
3.7
6
03

Behaviour

Read-only, disabled, saving and required
Read-only, exact4.3 = 30 % of the 5th star
4.3 → star 5 filled 30%
Disabledexplain why
🔒 You can rate Spring 27 after delivery on Nov 27.
Save & rollbackevery 2nd save fails
★★★★★★★★★★
Change the rating
Required in a formerror until picked
Rate the photographer *
★★★★★★★★★★
04

Rules & a11y

Checklist and which scale when
Checklist
✓Radio group semanticsrole=radiogroup, each star a radio “4 of 5 — Very good”
✓Keyboard← → change, Home / End, 0 clears, 1–5 jump
✓Words with colourPoor → Excellent, not only red → green
✓Display exact values4.3 fills 30 % of the fifth star
✓Explain disabledsay when rating becomes possible
✓Big enough targets≥ 32 px stars on touch
✓Ask why after a low scorefollow-up chips, optional text
STARS 1–5Quality of a delivered piece of work.Client reviews, photographers
NPS 0–10Loyalty — once per project or quarter.Post-delivery survey
👍 / 👎Quick yes/no usefulness.“Helpful” on reviews
CRITERIASeveral aspects matter separately.Quality, timing, budget
DO✓Show the count next to the average✓Let a second click clear the rating✓Follow a low score with “what went wrong?”✓Use half or tenth steps only for display
DON’T✕Rely on colour alone✕Use 10-star inputs✕Hide the distribution behind the average✕Ask for a rating before the work is delivered