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

Rating indicator

Responsiveness

The rating indicator runs on all form factors and therefore works on all devices. It is embedded in a container and thus behaves as part of it.

Rating indicator as part of a form – Size S

Rating indicator as part of a form – Size S

Rating indicator as part of a form – Size M

Rating indicator as part of a form – Size M

Layout

Context

You can use the rating indicator in forms, tables, in a dialog box, or in the filter bar.

Rating indicator as part of a form

Rating indicator as part of a form

Rating indicator in the filter bar / as part of a table

Rating indicator in the filter bar / as part of a table

Rating indicator as part of a dialog

Rating indicator as part of a dialog

Popover with Details

In collaborative rating scenarios, the rating indicator shows an average of all ratings. You may show the sum of ratings in brackets behind the rating indicator as a text or link. You may also add a popover that shows the detailed ratings for the average of all ratings.

Rating details in a popover

Rating details in a popover

Behavior and Interaction

Hover

When the user hovers over the rating indicator, a different icon or image is shown (property: iconHovered). This is an orange star by default.

Select

If enabled for rating, the rating that the user previously selected is shown. When the user performs a rating, an event is triggered.

Types

There are two types of rating indicators:

  • Interactive – used for rating an item
  • Disabled

As the non-interactive state (rating result preview) is not available currently, use the disabled state instead.

Interactive state

Interactive state

Non-interactive state

Non-interactive state

Display mode

Display mode

Disabled

Disabled

Properties

Rating Symbols

You can also specify the URLs for the images or icons that are used as rating symbols (property: iconUnselected). Five star symbols are used by default. Although you can use other images or icons, we generally recommend that you use the star symbol. You can only choose 1 symbol for the unselected and 1 for the hovered state.

Number of Rating Symbols

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

Visual Mode of Rating Symbols

The visual mode defines how float values are visualized: as a half or a full star (property: visualMode). A half star cannot be select by a user. Therefore, it can only be displayed in read-only mode. The main use case for this is to show average ratings.

Size of Rating Symbols

The recommended sizes of the image or icon to be displayed are:

  • Large: 2 rem (32 px)
  • Normal: 1.375 rem (22 px) – default
  • Small: 1 rem (16 px)
  • XS: 0.75rem (12px)

Possible sizes of a rating indicator: L, M, S, and XS

Possible sizes of a rating indicator: L, M, S, and XS

Resources

Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.

Elements and Controls

Implementation

Visual Design