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.
Ask your AI
Build me a five-star rating input. Keep the hover preview — where moving the mouse across the stars fills them up to that point to show the score you're about to give — strictly separate from the locked-in state that only commits when you actually click. Render the preview fill and the confirmed fill in different colors or brightness so the user feels sure of their score. Let them click again to change the value or reset it to zero, and next to the star graphic expose the number as text and an aria-label like '4 out of 5 stars'.
Build a display-only rating that shows [product/content name]'s average score of [e.g. 4.3] as five stars. This is read-only, not an input, so don't wire up any click handlers or hover fill, and set cursor to default instead of pointer so it never looks tappable. Render the decimal as a partial half-star fill, and next to the stars show the number and review count as text, like '4.3 / 5 (128 reviews)'. Add an aria-label of '4.3 out of 5 stars' for screen readers.
Review the rating code I'll paste below on four points. (1) Are the hover preview and the confirming click separated — fix it if just hovering sets the score or if clicking seems to do nothing. (2) Is a display-only rating accidentally styled like an input with a pointer cursor and hover effects, or the reverse? (3) Is there a way to change or undo a score once it's set? (4) Is there a numeric value and aria-label next to the stars, like '4 out of 5 stars'? Mark each point pass or fail, and give fixed code for anything that fails.