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 the form – Size S (for example, smartphone)

Rating indicator as part of the form – Size S (for example, smartphone)

Rating indicator as part of the form – Sizes M and L (for example, tablet and desktop)

Rating indicator as part of the form – Sizes M and L (for example, tablet and desktop)

Layout

Context

Use the rating indicator in forms, tables, or in a dialog box.

Rating indicator as part of a form

Rating indicator as part of a form

Rating Indicator as part of a table

Rating Indicator as part of a table

Rating indicator as part of a dialog box

Rating indicator as part of a dialog box

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.

Details for rating in popover

Details for rating in 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.

Types of rating indicator: Interactive and disabled

Types of rating indicator: Interactive and 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.

Float Values

Float values can be visualized as a half or full star (property: visualMode). The rating indicator can display a half star only in preview mode (disabled).

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 rating indicator: Size L, size M, size S, and size XS

Possible sizes of rating indicator: Size L, size M, size S, and size 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