Rating
A row of stars that shows a score or lets someone give one. Hovering previews the score before it is set.
Preview
Size
Good
When to use
- To collect a quick score: a review, a response to support, a recommendation.
- Read-only, to show an average next to its count.
Reach for something else
- For a precise value on a long scale: that is a Slider.
Anatomy
- 1
Stars
Usually five, filled up to the value.
- 2
Hover preview
Fills up to the star under the pointer until it leaves.
- 3
Value label
Optional, the score or its meaning: 4 of 5, Good.
States
Empty
No score yet, all outlined.
Hover
A preview of the score to be set.
Rated
Filled up to the chosen star.
Read-only
Shows a score, with half stars where needed; not interactive.
Accessibility
- An interactive rating is a radiogroup of five radios, each labelled "3 stars" and so on.
- Arrow keys move and set the value; Tab enters and leaves the group as one stop.
- A read-only rating is text for assistive tech, such as "Rated 4.5 out of 5".
Source
The Rating is in the Figma library today, with every variant and state above. Its React and Vue source ships with the code library, free, and this page gets the install line, the props and the code the day it does.
Tell me when the source landsTell me when the source landsand you'll get 10% off your first licence if you ever want the full library.
See it in a block