Rating
A rating control captures how good something was on a fixed scale, usually stars. The number is the whole answer.
<div role="radiogroup">Also called Star rating, Score input, Review stars.
No rating yet
Click a star to set the rating. Hover to preview. Arrow keys move the selection once a star has focus.
For designers
A rating asks one emotional question and expects a number back. Amazon product stars, Uber trip ratings and app store reviews all compress feedback into a row of icons because the scale is universally understood.
The cost is granularity. Five stars cannot capture 4.7 versus 4.8 in input, only in display. If the scale needs ten steps or named labels like Excellent, use a slider or radio group.
Ask one clear question above the stars. How was your delivery beats Rate this. The stars are the answer; the label frames what is being scored.
When to use a rating
Use a rating when
- You need a score on a small fixed scale, often one to five
- Stars communicate the question faster than a number field
- Hover preview helps someone decide before they click
Reach for something else when
- The exact decimal matters more than the whole star. Use a number field instead.
- There are more than about seven steps on the scale. Use a slider instead.
- The options are named levels like Poor, Fair, Good with different meanings. Use a radio group instead.
- You only need to display an average score, with no input. Use read-only display instead.
Variants
Average rating
4.0 from 128 reviews
Half stars
3.5 when scores sit between whole numbers.
A read-only average for display, and half-step precision when the product needs finer scores.
Interactive. Click or keyboard to set a score. Hover previews the level before commit.
Read-only average. Filled stars show the mean score. Pair with a count: 4.2 from 128 reviews.
Half-star display. Show a half fill when the average sits between whole numbers. Collect whole stars only unless you have a strong reason.
How to build a rating
Use a radiogroup of star buttons or a native range input with star styling. Each option needs a text label in the accessibility tree.
<fieldset>
<legend>How was your delivery?</legend>
<div role="radiogroup" aria-labelledby="delivery-rating">
<button type="button" role="radio" aria-checked="false" aria-label="1 star">★</button>
<button type="button" role="radio" aria-checked="false" aria-label="2 stars">★</button>
<button type="button" role="radio" aria-checked="false" aria-label="3 stars">★</button>
<button type="button" role="radio" aria-checked="false" aria-label="4 stars">★</button>
<button type="button" role="radio" aria-checked="true" aria-label="5 stars">★</button>
</div>
</fieldset>
Arrow keys move between stars when focus is inside the group. Click sets aria-checked on one star and clears the others. Colour fill is decoration; pair it with fill shape or aria-checked so WCAG 1.4.1 is satisfied.
Hover preview should not commit a value until click. On touch devices there is no hover, so the first tap selects. Keep the selected state visible after the finger lifts.
For read-only averages, round to one decimal in display text: 4.2 from 128 reviews. Showing 4.18392 adds noise without helping anyone choose.
Edge cases
Required reviews. Say that a rating is required before submit. Do not default to five stars.
Low scores. If one or two stars triggers a follow-up question, ask it on the next screen so the first tap still feels quick.
Touch targets. Stars can be small. Expand the hit area to at least 24 by 24 CSS pixels (WCAG 2.5.8).
Display versus input. Product pages show a read-only average. Review forms collect a new score. Use the same star shape for both so the scale feels familiar, but disable click on read-only rows.
Bias toward high scores. Defaulting to five stars inflates averages. Start with no stars selected and let submit validation ask for a pick when the rating is required.
Common questions
- How many stars?
- Five is the convention for product and delivery reviews. Three or ten appear in niche cases. Pick one scale and keep it across the product.
- Should stars fill on hover?
- Yes for interactive ratings. Preview up to the star under the pointer, then commit on click. Clear hover when the pointer leaves the group.
- Read-only or interactive?
- Read-only stars show an average on a product page. Interactive stars collect a new score in a review form. Do not mix the two patterns on the same row without a clear label.
- Half stars?
- Use them for display when the average is 4.3. Collecting half stars from users adds precision most reviews do not need.
- What is the accessible pattern?
- A radiogroup with one radio per star level, or a slider with discrete steps. Icon-only buttons need aria-label on each star: 1 star, 2 stars, and so on.
- Can the rating be cleared?
- Optional for reviews. If you allow it, add a clear action beside the stars and return focus to the group.
Last reviewed 27 AUG 2026