---
title: "Rating"
subtitle: "Interactive and read-only star ratings"
description: "How to use the rating component for star-based ratings and reviews."
author: "Studio"
section: "Design System"
layer: "core"
subsection: "Feedback"
order: 5
status: "published"
access: "team"
client: "internal"
---
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
| Token | Default (Light) | Default (Dark) | Purpose |
|-------|-----------------|----------------|---------|
| `var(--rating-color)` | `var(--yellow)` | — | Filled star colour |
| `var(--rating-color-empty)` | `var(--neutral-300)` | `var(--neutral-700)` | Empty star colour |
| `var(--rating-size)` | `1.5rem` | — | Star size |
---
## Interactive rating
```html
```
---
## Pre-filled rating
Set `data-value` to the initial score.
---
## Read-only
Add `.is-readonly` to disable interaction.
---
## Size variants
```html
...
...
...
```
---
## 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:
```js
document.querySelector('.rating').addEventListener('rating-change', function (e) {
console.log('New rating:', e.detail.value);
});
```
---
## Keyboard interactions
| Key | Action |
|-----|--------|
| `Tab` | Focuses the rating group |
| `ArrowRight` | Increases rating by 1 |
| `ArrowLeft` | Decreases rating by 1 |
| `Enter` / `Space` | Selects the focused star |
---
## 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 `` instead of `