When to Use

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 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.

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

  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