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.

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

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

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

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)