v3.2.0
Rating

Rating — a feature for evaluating a user's experience or interaction. It can be used after a journey, a purchase, contacting support or viewing content.

-- -- -- 3.2.3

Overview

The Rating component is built from the Slot component. It has four sizes:

  • 1
    L
  • 2
    M
  • 3
    S
  • 4
    Mini
1
2
3
4

States

  • 1
    Display mode read-only, no interaction. The mode can display 0.5 step.
  • 2
    Input mode the user sets the value by tapping a star.
1
2

For all states and sizes

1
2
3
4
5
  • 1
    background noneCan be changed to any color style from the DS.
  • 2
    Slot foreground color --text-and-icon-primary — by default.Can be changed to any color style from the DS.
  • 3
    Slot background color --surface-overlay — by default.Can be changed to any color style from the DS.
  • 4
    Description L Main Body--text-and-icon-secondary — by default.Can be changed to any color style from the DS.
  • 5
    Description M Compact Body--text-and-icon-secondary — by default.Can be changed to any color style from the DS.

Anatomy

Rating is a vertical stack: a row of five Slots on top, and an optional Description (a TextRow) below.

Elements

1
2
3
  • 1
    SlotsContainer A horizontal row of five identical Slots, each holding the fav star.
  • 2
    Slot One Slot — the fav icon at the size token; two stacked layers (background + fill) give the fill state.
  • 3
    Description Optional TextRow below the SlotsContainer (L / M only), with side slots for an icon / emoji.

Layout

All internal spacing uses SP tokens. Only L and M carry a Description beneath the Slots and can act in Input mode; S and Mini are display-only, Slots alone.

L — size

1
2
3
Default
fill + auto gap for SlotsContainer
s16 common paddings
  • General Vertical stack — the SlotsContainer plus the Description below.var(--sp-s8) — gap between the SlotsContainer and the Description.var(--sp-s0) — horizontal & vertical padding; the rating has no internal padding.var(--sp-s0) — roundness.
  • 1
    SlotsContainer The horizontal row of the five Slots. Two display modes:hug — width wraps the five Slots with a fixed var(--sp-s6) gap;fill — width stretches to a fixed-width parent and the gap becomes auto (the free space is distributed evenly between the Slots).
  • 2
    Slot var(--sp-s56) × var(--sp-s56) — each of the five Slots.
  • 3
    Description container TextRow below the SlotsContainer. Optional, hidden by default — the base is Slots only.

M — size

1
2
3
Default
  • General Vertical stack — the SlotsContainer plus the Description below.var(--sp-s8) — gap between the SlotsContainer and the Description.var(--sp-s0) — horizontal & vertical padding; the rating has no internal padding.var(--sp-s0) — roundness.
  • 1
    SlotsContainer The horizontal row of the five Slots — fixed var(--sp-s8) gap in hug mode. Hug and fill modes work the same as on L.
  • 2
    Slot var(--sp-s40) × var(--sp-s40) — each of the five Slots.
  • 3
    Description container TextRow below the SlotsContainer — Compact Body typography (L uses Main Body). Optional, hidden by default — the base is Slots only.

S — size

1
2
Default
  • General Slots only — S carries no Description and is display-only.var(--sp-s0) — horizontal & vertical padding; the rating has no internal padding.var(--sp-s0) — roundness.
  • 1
    SlotsContainer The horizontal row of the five Slots — fixed var(--sp-s4) gap in hug mode. Hug and fill modes work the same as on L.
  • 2
    Slot var(--sp-s24) × var(--sp-s24) — each of the five Slots.

Mini — size

1
2
Default
  • General Slots only — Mini carries no Description and is display-only.var(--sp-s0) — horizontal & vertical padding; the rating has no internal padding.var(--sp-s0) — roundness.
  • 1
    SlotsContainer The horizontal row of the five Slots — fixed var(--sp-s2) gap in hug mode. Hug and fill modes work the same as on L.
  • 2
    Slot var(--sp-s16) × var(--sp-s16) — each of the five Slots.

Animation

Input mode only — Display mode has no animation. Under prefers-reduced-motion: reduce every motion prop resolves to 0ms — fills apply instantly, nothing scales or bounces.

Motion

Live: tap a Slot — the fill waves in from the first Slot;
hover previews the value. Loops until you interact.
  • 1
    Tap — bounceWave Tapping Slot N replays the fill from the very first Slot: Slots 1…N bounce in sequence — each starts var(--component-bounce-wave-step) (70ms) after the previous, scales ×1.28 over var(--component-bounce-wave-bounce) (380ms) and reveals its fill left→right at the 110ms peak over var(--component-bounce-wave-fill) (160ms). Slots above N unfill instantly.
  • 2
    Hover — preview The hovered Slot scales ×1.18 (var(--rating-state-fast)); Slots up to it fill instantly, the rest unfill. Leaving the rating restores the committed value.
  • 3
    Press pushItem — the pressed Slot scales to 95% via var(--rating-push-item-press), release returns it via var(--rating-push-item-release).

Usage

Use when you collect a score after a completed trip / order, or display an aggregated rating alongside a count (e.g. "4.8 · 1 204 reviews"). A 5-point scale is the established feedback pattern.

  • 1
    Collecting a score Input mode after a completed trip / order — the component's main job. One Rating per screen, L or M, whole stars; the prompt lives in the Description ("Rate your trip").
  • 2
    Inline in a Cell — not the component In lists and Cells the rating metaphor is a number + a single star icon ("4.5 ★") — minimal and instantly readable. The 5-Slot Rating component is for collecting a score and for prominent display.
✓ Collecting a score — input mode, prompt in the Description
✕ Inline in a Cell — use the number + star icon ("4.5 ★"), not the component

Accessibility

Rating reads as a single image in display mode and as a group of five toggle buttons in input mode. The two platforms split the announcement differently: in display mode TalkBack carries "Rating" as the label and "3 out of 5" as a separate value, while VoiceOver puts the whole thing in the label as "Rating, 3 out of 5" and exposes no value at all. The input hint differs too — "Double-tap to set" against "Double-tap to activate". The per-platform label/trait/hint tables live in the spec: specs/components/rating/rating-a11y.md.

Screen reader

role="img" — announced once, half steps included
role="group" — five toggle buttons
1
2
  • 1
    Display — announced once Wrapper role="img"; the aria-label carries the whole value including half steps and the Description text ("Rating: 4.5 out of 5, 1 204 reviews"). All five Slots and the visible Description are aria-hidden — the score is never announced twice.
  • 2
    Input — five buttons Wrapper role="group" "Rating"; each Slot is a <button> "1 star"…"5 stars" with aria-pressed true up to the committed value. Disabled uses the native attribute — buttons drop out of the tab order automatically.
  • 3
    Keyboard & focus Tab / Shift+Tab move between Slots; Space / Enter commit the focused Slot's value. Focus keeps the browser's default outline — never suppressed. Display mode has no focusable descendants.
  • Contrast
  • 5
    Filled star on background --text-and-icon-primary / -accent / -brand on --background-primary — ≥ 3:1 (non-text UI component). The empty star (--surface-overlay) is decorative — no requirement.