A rating component is two components with one appearance. One collects a rating and is a form control. The other displays an average and is text with a picture. They look identical, they behave nothing alike, and building the second as if it were the first is the most common mistake in this category.
11 public components on 21st have "rating" in the name, and the split runs straight through them.
Collecting a rating
An input. Star Rating by Ayushmaan Singh and Rating by sean0205 are the interactive stars, Rating Group by anubra266 is the grouped version, and Rating Scale Group by Ruixen UI is the survey-style scale.
Emoji Rating by Jatin Yadav swaps stars for faces, which is worth considering: five stars ask for a judgement people find hard to calibrate, while five faces ask how it felt, which is what most product surveys actually want to know.
The contract is a radio group. Five stars are five radio inputs with one name, so arrow keys move between them, the whole group is one tab stop, and each option has a label such as "3 out of 5". Built from divs with click handlers, it is a control nobody can use from a keyboard - and unlike a menu, the failure is silent.
Two more: allow clearing, because a mis-tapped rating with no way back is worse than none, and decide about halves before you build, since half-stars change the input model rather than the styling.
Displaying an average
Not an input. Not focusable, not in the tab order.
The right markup is the number as text with the stars marked aria-hidden: "4.3 out of 5, 128 reviews", with the picture as decoration beside it. A screen reader then reads a fact rather than five images, and the text is what a search engine and an answer engine read too.
The count matters as much as the score. "4.8" alone is unverifiable; "4.8 from 12 reviews" is a fact with a shape. A high average from a handful of ratings tells a careful reader that the sample is small, and hiding the count reads as hiding it.
The schema trap
Star ratings are one of the few places where structured data actively backfires, and it is worth being precise. Review and AggregateRating markup for reviews of your own product, collected and displayed by you, is excluded from rich-result eligibility. Marking up a testimonial wall or a self-hosted rating with AggregateRating will not produce stars in search results, and misapplied review markup is a known cause of manual actions.
Where it does apply: reviews of a product you sell in a catalogue, which the product card guide covers, where the ratings are from customers about an item rather than about you.
The testimonial guide makes the same point from the other side: an attributed, linkable quote does more for credibility than any markup, and answer engines read it without needing schema at all.
Where else to look
The honest list, because the answer is not always us:
| Source | Best for | Trade-off |
|---|---|---|
| A radio group with CSS | The input, correctly, in very little code | You style the stars yourself |
| React Aria | The keyboard and announcement behaviour | More API than the control needs |
| Plain text plus a decorative icon | Displaying an average, which is most uses | Not interactive, which is the point |
| 21st | Stars, emoji scales and survey groups | Quality varies by author, so preview before you take it |
Taking one
Every component page has a live preview and the code. Installing goes through the shadcn CLI against our registry:
That key comes from your 21st account, and installs require a membership. Set API_KEY_21ST once in your shell and the command works for anything in the catalogue.
Frequently asked
- How do you build an accessible star rating input?
- As a radio group: five radios with one name, so arrow keys move between them and the group is a single tab stop, with a label such as 3 out of 5 on each option. Built from divs with click handlers it is unusable from a keyboard, and unlike a menu the failure is silent.
- How should an average rating be displayed?
- As text, with the stars marked aria-hidden: 4.3 out of 5, 128 reviews. It is not an input, so it should not be focusable. Always show the count, because a high average from a handful of ratings is a different fact and hiding the number reads as hiding it.
- Will rating markup give me stars in search results?
- Not for reviews of your own product collected and displayed by you, which are excluded from rich-result eligibility. Misapplied review markup is also a known cause of manual actions. It applies to reviews of items you sell, not to your own testimonial wall.
- Stars or emoji?
- Emoji, often. Five stars ask for a judgement people find hard to calibrate; five faces ask how something felt, which is what most product surveys actually want. Whichever you pick, allow clearing and decide about half-steps before building, since halves change the input model.