
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.
Better at UI design with every challenge
Select complexity and generate challenge.
