UI components · Form input
Rate
Also called: Rating, Star rating, Stars, Review stars
A row of five stars (or other icons) where the number lit up is the score. Users can give a rating with it, or it can just show an average score.
Click “Labeled” to see what each part is called.
How to tell AI
Swap in your own content firstAdd a five-star rating to the review form. Make the stars 24px. Hovering previews them lighting up from left to right, clicking sets the score, and half stars are supported. On the right, show matching text: "Terrible / Poor / Okay / Good / Great." On product cards, show the average score with small read-only stars, followed by "4.8 · 1,203 reviews."
Send to
01Decide
Does your content look like this?
Check both columns to confirm Rate is what you need.
Use Rate when
- In a review form, letting users give an overall score to a product, service, or piece of content
- Showing a read-only average score on a product card or product page
- The scores have a clear low-to-high order and about five levels
Pick something else when
The options are unrelated categories rather than levels; radio buttons are clearer
Use insteadRadioYou need detailed ratings on many separate aspects, and a whole page of stars tires users out
Not sure? Upload a screenshot and page analysis will check which layout each block should use.
02Pitfalls
Common misuse
It looks like it works, but it makes things harder for users.
- 01
Read-only ratings that show only stars with no score or review count, so users can't see the actual difference
- 02
Stars that are too small and too close together, so they're hard to tap on a phone
- 03
A read-only rating that lights up on hover, so users click it and think they've rated
03Spot it
How to spot it
Look at the overall structure first, then check a few features you can spot at a glance.
Structure
A row of clickable stars or other icons, lit up according to the score, often with the score as text or the number of reviews.
PartsClick one to highlight it in the wireframe above
04Explained
In detail
A rating most often looks like a row of five stars. Hovering previews them lighting up from left to right, and clicking sets the score. Some support half stars, like 4.5. It has two uses. One is input: in a review form, users rate a product, service, or piece of content. The other is read-only display: showing the average score on a product card, usually followed by text like "4.8 · 1,203 reviews."
For read-only display, stars alone aren't precise enough. Always add the number and the review count, or users can't tell 4.2 from 4.6. If the options aren't levels but categories like "Satisfied / Neutral / Unsatisfied," a Radio or emoji buttons are clearer than stars. Give the stars a big enough tap area, especially on phones.
Developer infoTerm ID, DOM cues, match priority
- Term ID
component-rate- DOM selectors
The extension matches these CSS selectors when it inspects a page locally (tags, ARIA roles, common component library classes).
.ant-rate.el-rate[class*="MuiRating-root"].arco-rate.t-rate.n-rate
- Priority
- 2 · when several match at the same level, the higher priority wins
- Version
- v2 · updated Sep 29, 2026