Components
Rating
Rating is an input that lays out a row of icons, usually stars, and lets you pick how many to fill in to give a score.
Definition
A rating lays out a row of icons, usually stars, and lets you pick how many of them to fill in to give a score. The most familiar version is five stars: as you move the mouse across them, the stars fill up to that point so you can preview which score you're about to give, and only when you actually click does that value get locked in. Separating the hover preview from the click that confirms is what makes a rating feel right. Ratings aren't only used as inputs, either. They also show up as display-only elements that simply report an average score other people already gave. These two jobs are clearly different, and you need to make it obvious from the look alone whether a set of stars can be clicked or not, so users never have to guess.
Why does it matter?
Ratings matter because they compress a complicated judgment into one tiny action. A user can express how satisfied they are by tapping a few stars, without writing a single sentence, which dramatically lowers the barrier to participating. All those scores added together become powerful evidence that helps the next person choose. When we're picking an unfamiliar product or piece of content, we glance at the average rating and the number of reviews first and decide whether to trust it almost instantly. So a rating is an easy way to express an opinion on one side and compressed, at-a-glance trust on the other. It's a small element with outsized influence, building up valuable data across the whole product for very little effort, which is exactly why it deserves to be handled accurately and honestly.
Common mistakes
- Not separating the hover preview from the confirming click. If just moving the mouse over a star sets the score, or if clicking doesn't seem to change anything, users can't be sure what rating they actually gave. They get confused, and a value they never meant to leave ends up sticking.
- Making a display-only rating look like an input. When stars appear clickable but nothing happens after a tap, people assume the thing is broken rather than realizing it was never interactive.
- Giving no way to undo or change a score once it's set. A user who mis-tapped and can't fix the value will simply stop leaving ratings altogether next time.
Practical tips
- Clearly split the hover preview from the click that confirms. Show the preview state and the locked-in state differently, with color or fill, so accidental taps drop and users feel sure about the choice they made.
- Draw a hard line between display-only ratings and real inputs. If a rating is only for showing a score, use the cursor shape or size to signal that it can't be clicked, so nobody taps hopefully and then panics when nothing responds.
- For accessibility, offer the numeric value alongside the star graphic. Reading as text like "4 out of 5 stars" helps screen reader users and half-star values alike, and you can reuse that same value directly for search and sorting.