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 review
- Service feedback
- Content quality score
- A quick ordered evaluation
When NOT to use it
- Use stars when the levels have no shared meaning
- Rely on color alone to show the selected value
- Hide what the first and last levels mean
- Make a rating required without explaining why
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
