# How to design a star rating in a feedback form

> Make the star rating optional, give the question a visible label, and build the stars from real radio buttons or buttons so the keyboard works. Read ratings next to the messages that explain them, because an average alone hides the reason behind a low score.

Source: https://escutaproduto.com/resources/star-rating-ux
Last updated: 2026-10-11

## Should the star rating be optional or required?

Make the rating optional. A feedback form exists to collect the reason behind a person's reaction, and the rating is a shortcut that many people will skip. A required rating blocks the people who had a clear problem but no wish to score the product. It also pushes people to pick a number they do not believe in, which makes the average less useful.

The Escuta Produto widget offers an optional rating from one to five stars. The visitor can send feedback without touching it. If you build your own form with the REST API, keep the `rating` field optional too, and leave it out of the JSON body when nobody picked a value.

## How many stars should the scale have?

Five stars is the common choice because people already understand it, and it gives enough range to separate a small complaint from a serious one. A three-point scale is simpler but loses the difference between mildly unhappy and very unhappy. A ten-point scale asks for more thought than a short feedback form deserves.

Whatever scale you pick, keep the direction the same everywhere. One star should always mean the worst result, and five should always mean the best. Do not mix a scale where five means bad, because the average becomes misleading.

## What labels make each star understandable?

A star with no label only says that a number is coming. Give the question its own visible text, such as "How well does this feature work for you?", and let each star have a name a screen reader can read, such as "3 stars". When the scale needs words, add short anchors at the ends, such as "Not useful" and "Very useful", placed under the first and last stars.

Avoid a label that asks a question the scale cannot answer. "How much do you love us?" asks for emotion, while a star scale measures satisfaction with something specific. Tie the question to the product area when the form appears inside a feature.

## How do keyboard users set a rating?

Stars drawn as icons with a click handler fail for keyboard users. Use real controls instead. The most reliable pattern is a group of radio buttons styled to look like stars. Radio groups let people move between values with the arrow keys and select one with the space bar, and screen readers announce the group name and the chosen value.

```html
<fieldset>
  <legend>How well does this feature work for you? (optional)</legend>
  <input type="radio" id="rate-none" name="rating" value="" checked>
  <label for="rate-none">No rating</label>

  <input type="radio" id="rate-1" name="rating" value="1">
  <label for="rate-1">1 star</label>

  <input type="radio" id="rate-2" name="rating" value="2">
  <label for="rate-2">2 stars</label>

  <input type="radio" id="rate-3" name="rating" value="3">
  <label for="rate-3">3 stars</label>

  <input type="radio" id="rate-4" name="rating" value="4">
  <label for="rate-4">4 stars</label>

  <input type="radio" id="rate-5" name="rating" value="5">
  <label for="rate-5">5 stars</label>
</fieldset>
```

Make the touch targets large enough for a thumb. WCAG 2.2 sets a minimum target size of 24 by 24 CSS pixels for AA conformance, and a larger target is kinder on a phone. Give each star's label padding, so the whole star is tappable and not only the small icon drawn inside it.

Radio buttons cannot be unselected with a click, so include a "No rating" option that is checked by default. Hide the native radio circles visually, but keep them in the page and show a clear focus ring on the label when the radio has focus. A focus ring you can see is the part most custom star widgets get wrong.

## How do you read ratings alongside messages?

A rating tells you how someone felt, and the message tells you why. Read them together. A table with three columns works well for a weekly review: the rating, a sample of the messages, and the action you plan.

| Rating | Typical message | Likely action |
| --- | --- | --- |
| 1 or 2 | "The export keeps timing out on large files" | Open a bug, reply to the sender |
| 3 | "It works, but I cannot find the filter" | Check the navigation and the docs |
| 4 or 5 | "Love the new dashboard" | Share with the team, thank the sender |
| No rating | "Please add a dark theme" | Add to the idea list |

Ratings from visitors who skipped the stars are still useful. Do not discard those messages, because the people who write without scoring often have the most specific ideas.

## Which rating mistakes skew the averages?

Three patterns distort the numbers. The first is a scale with no default, where the form submits a zero that looks like a real score. The second is a rating required on the form, which pushes people toward the middle. The third is a rating shown beside a praise message, which can make it look like a verdict on the product rather than a reaction to one feature. Keep the rating separate from the message in your review, and read each one before you draw a conclusion.

Average ratings also hide the spread. Two products can both average 3.5, one with mostly threes and the other with a mix of ones and fives. Look at the count for each value before you report the average to anyone.

## Reading the rating field in Escuta Produto

The dashboard shows the average rating and counts by type, so use those as a starting point and read the messages behind any score that surprises you. The form in the widget keeps the rating optional, and the details of each option are in the [widget docs](/docs/widget). For the copy that prompts a useful message, see [what to write in a feedback form's message field](/resources/feedback-message-field-copy). If the form appears on a phone, [designing a feedback widget for mobile screens](/resources/feedback-widget-mobile-design) covers how the stars fit a narrow screen and a thumb.

## Frequently asked questions

### Should a feedback form require a star rating?

No. Keep the rating optional so people can send feedback without scoring it. A required rating blocks people who have a clear problem and pushes others toward a number they do not really hold.

### What is the most accessible way to build a star rating?

Use a group of real radio buttons styled to look like stars, inside a fieldset with a visible question as its legend. Arrow keys move between values, the space bar selects one, and screen readers announce the group and the chosen value.

### How should I read ratings in a feedback inbox?

Read the rating together with the message. A low score with a specific message points to a fix, while a high score with a praise message tells you what to keep. Look at the count for each value, not only the average.