Rating indicator

Design a rating indicator that works in two modes: display and input. In display mode, it shows a fixed score for a product, service, or piece of content. In input mode, users can set a rating by selecting one of 5 steps. Keep the pattern familiar, but make the chosen value readable without relying on the icon shape alone.

Design the full state set: empty, selected, hover preview, focus, pressed, and disabled. Hover should preview the value before commit. Keyboard users need the same control with a visible focus ring and predictable left/right or up/down movement. If the control is read-only, it should look intentional, not broken.

Use any rating metaphor that fits the product: stars, hearts, thumbs, dots, or custom marks. The important part is that the active value is clear, the inactive value is quiet, and the spacing makes each step easy to target. Add a text label such as “4 of 5” or a short descriptor so the component still works for screen readers and low-vision users.

Invoke delight by using fun animations or unique graphics for your rating indicator. This can enhance user engagement and make the rating process more enjoyable.