Use the viewport controls to check responsive behavior, then copy the implementation that fits your stack.
4 patterns
These examples provide interface structure only. Connect and validate submissions in your own trusted backend before production use.
Static star rating
A display-only star score with complete accessible text.
displaystars
Accessibility
Stars are decorative; the numeric score is available as text and label.
Uses native semantic elements and visible keyboard focus.
Text and controls do not rely on colour alone.
Responsive behaviour
Reflows below 620px without horizontal page overflow.
Interactive targets remain usable for touch and zoom.
Rating with review count
A compact product rating linked to its reviews.
reviewsproduct
Accessibility
The score and review destination are understandable without star glyphs.
Uses native semantic elements and visible keyboard focus.
Text and controls do not rely on colour alone.
Responsive behaviour
Reflows below 620px without horizontal page overflow.
Interactive targets remain usable for touch and zoom.
Interactive rating input
A keyboard-operable native radio group for choosing a score.
interactiveradio
Accessibility
Native radios provide arrow-key selection and each choice has a complete accessible name.
Uses native semantic elements and visible keyboard focus.
Text and controls do not rely on colour alone.
Responsive behaviour
Reflows below 620px without horizontal page overflow.
Interactive targets remain usable for touch and zoom.
Rating distribution
A text-labelled summary of score distribution.
summarydistribution
Accessibility
Every visual bar has adjacent text for its score and percentage.
Uses native semantic elements and visible keyboard focus.
Text and controls do not rely on colour alone.
Responsive behaviour
Reflows below 620px without horizontal page overflow.
Interactive targets remain usable for touch and zoom.
Implementation notes
These examples use plain CSS and no external dependencies. Replace sample content and destinations while preserving the semantic structure, labels, focus treatment and responsive behavior.