Rate
You might say
Let people rate the product with stars.
Express a rating with stars or ordered levelsA rating control lets people show satisfaction on an ordered scale, often with five stars. Pair the graphic with a readable number or label, and make sure keyboard and screen-reader users can select a value too.
When to use it
- Product reviewBluetooth headphones★★★★★4.0
- Service feedbackRate this service★★★★★
- Content quality score★★★★★3.5 stars
- A quick ordered evaluation★★★★★RatingSample size and methodology
When NOT to use it
- Use stars when the levels have no shared meaning♥ AgreeFor simple positive or negative feedback, use like and dislike controls
- Rely on color alone to show the selected valueLikelihood to recommend★★★★★★★★★★When there are many options to count individually, use a better-suited control
- Hide what the first and last levels mean★★★★★Tell us why you gave this rating…
- Make a rating required without explaining whyQuantity★★★★★Use a number input for quantity
Anatomy
★★★★★
4 stars · Satisfied
Usually five icons; both the count and icon can vary
Filled icons show the selected rating; outlines show the rest. Half-star ratings are also possible.
The score and what it means, such as “4 stars · Satisfied.”
Variants
Default
★★★★★
Use a five-star scale to show satisfaction
Half Star
★★★★★3.5
When you need half-star precision
Readonly
★★★★★4.8
Show a read-only overall rating
Custom Icon
♥♥♥♥♥
Use an icon such as a heart when it better fits the brand.
Typical use cases
Product review
Wireless Bluetooth headset
Transaction successful · July 18
Product evaluation
★★★★★
Satisfied
Support survey
Course feedback
Are you satisfied with this service?
Support agent Mia · Conversation ended
★★★★★
Very satisfied
Content rating
