Updated: July 16, 2024

Rating Indicator

ui5-rating-indicator | v1.0

Intro

The rating indicator can be used to rate content or to indicate a rating. It enables users to rate an item on a numeric scale. The most popular scale is 1 (lowest) to 5 (highest).
Rating Indicator – live example

When to Use

Do

Use the rating indicator:

  • If you want to collect user feedback in the form of star ratings (for example, for user satisfaction surveys or product reviews).
  • If you need a visually appealing way to showcase the popularity or quality of items, products, or content.
Don't

Don’t use the rating indicator:

  • If the content you’re presenting doesn’t lend itself to user ratings (for example, legal documents, terms of service, or non-interactive content). In such cases, using a rating indicator doesn’t add value.
  • If adding a rating indicator introduces unnecessary complexity to your UI, especially when you don’t anticipate much user interaction.

Anatomy

  1. Selected icon: Indicates the rating. At least one element must be selected.
  2. Icon not selected: Indicates non-active rating states.
 Anatomy of a rating indicator
Anatomy of a rating indicator

Variants

Required

You can require users to enter a rating. If you use this option, we recommend using a label together with the rating indicator to indicate that the rating is mandatory.


  Rating indicator with “required” label

Number of Symbols

You can specify the number of rating symbols (property: max). We recommend using a maximum of 7 symbols, though 5 symbols are preferred.

  Examples: Rating indicators with 4, 5, and 7 symbols

Behavior and Interaction

The behavior and interaction depends on the control state:

  • In the enabled state, users can enter a rating.
  • In the disabled state, the component is non-interactive.
  • The read-only state provides visual feedback upon user interaction. In this state, you can use a half star to show average ratings.

  Rating indicator states
(from top to bottom: enabled, read-only, disabled, read-only with half-star)

Responsive Behavior

The rating indicator runs on all form factors and therefore works on all devices.

Related Links

Components

Implementation