Star Rating

Use star ratings to collect user feedback on a subject or experience using a five-star scale.

Use star ratings to:

  • Collect user feedback on experiences
  • Allow users to rate content, features, or services on a five-point scale
  • Provide a familiar, intuitive method for expressing satisfaction levels
  • Gather structured feedback that can be easily aggregated and analysed

Do not use star ratings:

  • When more granular ratings are needed, consider a numerical scale or slider instead
  • For binary feedback — use a switch, checkbox, or simple buttons instead
  • When the five-star metaphor doesn't fit the context, choose a more appropriate rating mechanism
  • For complex, multi-dimensional feedback — use multiple rating inputs or detailed form fields
Example of a star rating input group using a legend and helper text to ask a user for feedback

Example of a star rating being used to ask for user feedback

Star ratings vs sliders vs radio buttons

Use a star rating for

Use the slider for

Use radio buttons for

Five-point satisfaction or quality ratings

Continuous or fine-grained numeric input

Multiple discrete options with labels

Familiar rating metaphor

Values where relative position matters

Verbal scales (e.g., "Poor", "Fair", "Good")

Quick emotional feedback

Adjustable values (volume, price range)

When all options need explicit labels

Structure

Star ratings contain:

  1. Legend — Clear question or prompt positioned above the stars
  2. Helper text (optional) — Additional guidance below the stars
  3. Error message (optional) — Validation feedback if required, but not completed
  4. Star inputs — Five interactive stars displayed inline
  5. Value label (optional) — Text below the stars indicating the selected rating

Legend

  • Use a legend to group the fieldset correctly
  • Use sentence case to ask the question about the rating

Stars

  • Always display five stars
  • Stars can be empty (unselected) or full (selected)
  • No half values — only whole number increments (1, 2, 3, 4, 5)
  • Stars are displayed inline in a single row

Value Label

  • Use sentence case
  • Should have consistent labels
    • Very Poor (shortened to V.Poor)
    • Poor
    • Fair
    • Good
    • Great
  • Position below the star inputs like other form elements