Inputting vs. aggregating

The rating component supports two main use cases: inputting and aggregating. Inputting allows users to select a rating, while aggregating displays the average rating, which may include fractional stars. Interactive ratings show only whole stars to avoid confusion during selection.

Editing a previous rating

When a user interacts with a rating component that shows a previously entered value, a tooltip appears when they hover over a star. The language in the tooltip is phrased as a call-to-action to edit their rating. For example, "Edit 4 star rating".

Clearing a previous rating

A user's previously entered rating can be cleared if they select the "highest" star (for example, clicking or tapping the fourth star from the left on a four-star rating). On keyboard focus, the left/down arrow keys will decrease the rating until the last star is removed. A tooltip appears on hover with alt text that describes the action, for example "Clear 4 star rating".

Approximate vs. precise rating

Rating can display approximate value or precise value depending on the needs of the product or service. For example, Amazon.com uses approximate rating, but Apple's App Store uses precise rating.

Mixed value

When representing multiple values (e.g., rating 2 photos at the same time), the rating is shown as empty if the ratings are not the same. This behavior is consistent with how a radio button group works, as well.