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

When to Use

Use the rating indicator:

If you want to collect quantitative 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).
If adding a rating indicator introduces unnecessary complexity to your UI, especially when you don’t anticipate much user interaction.

Anatomy

Anatomy of a rating indicator

Selected icon: Indicates the rating. At least one element must be selected.
Icon not selected: Indicates non-active rating states.
Dynamic text: Dynamic text that shows the rating.
Icon read-only: Indicates non-active rating states.

Behavior and Interaction

The rating indicator works on all devices. When placed inside another UI element, the rating indicator adapts to that element’s layout and behavior.

Rating indicator on hover – highlights the star under the pointer before the user selects a rating.

Rating indicator on focus – shows the selected rating with a visible focus outline.

States

States rating indicator showing regular, disabled, and read-only states.

A. Regular state: The active, editable state where users can select or change the rating.
B. Disabled state: The inactive state, in a faded style showing the rating cannot be interacted with.
C. Read-only state: The fixed state where the rating is visible to users but cannot be altered.

information

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

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

Number of Rating Symbols

You can specify the total number of rating symbols (stars), with 5 recommended but up to 7 possible.

Recommended 5 symbols and maximum 7 symbols

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 selected by a user. It can only be displayed in read-only mode. It’s mostly used to show average ratings.

Average ratings

Size of Rating Symbols

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

A: Large: 2 rem (32 px)
B: Normal: 1.375 rem (22 px) – default
C: Small: 1 rem (16 px)
D: XS: 0.75rem (12px)

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

Responsiveness

The rating indicator adjusts its alignment based on the form size. In smaller forms (Size S), the text is left-aligned, while in medium forms (Size M), it is centered.

Rating indicator as part of a form – Size S

Rating indicator as part of a form – Size M

Extra small viewport experience

The XS viewport experience applies for any zoom scenario that results in minimum viewport constraints.

On extra small viewports at 200% zoom, applications should ensure that rating indicator remains usable in limited space. In compact layouts, size M (1.5rem / 24px) is recommended over size L (2rem / 32px). When space is insufficient, accompanying text wraps below the icons. Using more than 5 stars is not recommended. Responsive behavior is handled at application level according to the application requirements.

Localization

In left-to-right (LTR) languages, the rating indicator displays stars and text from left to right. In right-to-left (RTL) languages, it flips direction, displaying stars and text from right to left.