Rating

Ratings display a star-based score. They can be interactive (click to rate) or read-only (display only). The component supports size variants and fires a rating-change custom event.

Tokens

Interactive rating

<div class="rating" data-value="0" aria-label="Rate this item">
  <button class="rating-star" aria-label="1 star" type="button"><!-- star SVG --></button>
  <button class="rating-star" aria-label="2 stars" type="button"><!-- star SVG --></button>
  <button class="rating-star" aria-label="3 stars" type="button"><!-- star SVG --></button>
  <button class="rating-star" aria-label="4 stars" type="button"><!-- star SVG --></button>
  <button class="rating-star" aria-label="5 stars" type="button"><!-- star SVG --></button>
</div>

Pre-filled rating

Set data-value to the initial score.

Read-only

Add .is-readonly to disable interaction.

Size variants

<div class="rating rating--sm">...</div>  <!-- 1rem stars -->
<div class="rating">...</div>             <!-- 1.5rem stars (default) -->
<div class="rating rating--lg">...</div>  <!-- 2rem stars -->

JavaScript

Include assets/js/rating.js on any page using interactive ratings. The script auto-initialises all .rating:not(.is-readonly) elements.

The component fires a rating-change custom event on the .rating element when the value changes:

document.querySelector('.rating').addEventListener('rating-change', function (e) {
  console.log('New rating:', e.detail.value);
});

Keyboard interactions

Accessibility notes

• Each star button needs aria-label (e.g. "1 star", "2 stars")
• The rating group needs aria-label describing the context
• Read-only ratings use <span> instead of <button> since they are not interactive

Do / Don't

Do:

• Use ratings for user feedback and reviews
• Show the numeric value alongside the stars when space allows
• Use .is-readonly for display-only ratings

Don't:

• Don't use ratings for binary yes/no feedback — use a toggle or buttons
• Don't use more than 5 stars