The Star Rating field lets users give a quick rating on a 1–5 scale. Selecting a star also fills every star to its left, so the rating reads at a glance.
Default
Rate your experience
Tap a star, where 1 is poor and 5 is excellent.
States
Rate your experience
Tap a star, where 1 is poor and 5 is excellent.
DefaultNo rating chosen yet. All five stars are shown as grey outlines.
Rate your experience
Tap a star, where 1 is poor and 5 is excellent.
HoverHover state indicates interactivity when the cursor is over a star by changing its colour to hover-blue.
Rate your experience
Tap a star, where 1 is poor and 5 is excellent.
SelectedThe user has chosen a rating. The selected star and every star to its left fill with the primary colour, so the rating is readable at a glance.
Rate your experience
Available after you complete the booking.
DisabledThe component is visible but not interactive. The whole field appears dimmed to indicate the rating is unavailable.
Your rating
Submitted on 12 March 2026.
Read onlyRating is visible but not editable. Selected stars are shown in grey and the row does not respond to hover or click.
Rate your experience
Please select a rating
ErrorShown when the field is required and the user has tried to submit without choosing a rating. The unselected stars turn red and an error message appears below the row.
Rate your experience
Thank you!
ValidConfirms that a rating has been recorded. An optional success message can appear below the stars.
Behaviour
Interaction
Users set a rating by clicking or tapping a star.
The selection fills the chosen star and every star to its left (e.g. tapping the third star records a rating of 3).
Once chosen, the rating persists until the user selects a different star.
If the field is required, the error state triggers when the user tries to submit without choosing a star.
Supports mouse, touch, and keyboard input (Tab to focus the row, Arrow keys to move between stars, Space or Enter to select).
Rate your experience
Rate your experience
Specs
1
Label
Tells the user what they're rating (e.g. "Rate your experience", "How satisfied are you?").
Recommended max: 40 characters.
2
Stars
Default: grey outline (unselected).
Selected: filled in primary blue.
Hover: hovered star turns hover-blue to preview the rating.
Error: unselected stars turn red until the user makes a choice.
Five stars total. The row uses a 1–5 scale.
3
Helper text
Optional guidance below the stars — e.g. what each end of the scale means, or feedback after a selection.
Recommended max: 100 characters.
1
Rate your experience
2
3Tap a star, where 1 is poor and 5 is excellent.
Dos and Don'ts
Use a clear, specific label so users know exactly what they're rating (e.g. "Rate your experience", not just "Rating").
Show the error message only after a failed submit — don't surface it before the user has had a chance to interact.
Use Star Rating only for satisfaction, quality, or preference on a 1–5 scale. For other ranges (e.g. 0–10 NPS), use Scale Number instead.
Always confirm a successful submission with a short helper message ("Thanks for your rating") so the user knows the value was captured.
Don't combine Star Rating with a separate numeric input asking for the same value — pick one input, not both.
Don't change the meaning of the scale between forms (e.g. don't make 1 best in one place and 5 best in another). Keep "5 = best" everywhere.
Don't use Star Rating for irreversible or high-stakes decisions — use a clear list of options instead.