Ratings

What is a rating component?

A rating component lets users give or view a score, most often with stars, but also with hearts, thumbs up and down, emoji faces or numeric scales. Read-only ratings show an average next to products, courses or reviews. Interactive ratings collect feedback in review forms, satisfaction surveys and "was this helpful?" prompts.

When to use ratings

• On product cards and detail pages to show the average score and number of reviews.
• In review forms where users rate before writing text.
• For quick feedback at the end of support chats, articles or onboarding.
• Use a numeric scale (for example 0 to 10) when you need finer or more neutral feedback than stars.

Best practices

• Build interactive star ratings from a group of radio inputs inside a <fieldset> with a <legend>, so they work with keyboard and screen readers without extra scripting.
• Give each option a label such as "3 out of 5 stars", even if it is visually hidden.
• For read-only ratings, provide the value as text, for example "Rated 4.5 out of 5", and hide the decorative stars with aria-hidden="true".
• Make each star at least 32 pixels wide on touch screens and show a hover and focus preview.
• Use colour plus shape (filled versus outline) so ratings are readable without colour.
• Support half stars only for display; for input, whole values are easier to use.
• Show the review count next to the average so users can judge how reliable it is.

Framework versions

The star rating examples here include CSS-only star inputs, read-only rating displays, rating summaries, emoji feedback and thumbs up and down controls. Bootstrap 6 versions use theme-* colour roles for filled states. Bootstrap 5 versions combine form check inputs and utilities with icons, Tailwind CSS versions use peer variants for hover and checked states, and pure CSS star rating versions work without JavaScript. Preview them live, copy the HTML and CSS, and connect the values to your review system.