Rating

@summonware/ui · rating · P2 · Forms

Usage

A 5-star input or display. `readOnly` switches it from an interactive control (`role="radiogroup"`, one star = one value) to a display-only summary (`role="img"`) — the two have different semantics and should not share one ARIA role.
import { Rating } from '@summonware/ui';

Best practices

DoSet `readOnly` when showing an existing average rating (e.g. "4.2 stars from 380 reviews") — that is not a control the viewer can change.
Don'tAllow half-star precision without changing the visual — a filled/empty-only star cannot honestly represent 3.5.

Examples

Common configurations, variations and states.

Interactive rating

Click a star to set the value; hover previews the selection.

Read-only summary

For showing an existing rating the viewer cannot change.

Reference variants

1 of 1 labels from the reference are demonstrated above.
Rating

Where it appears

Used on 2 catalogued screens, including application-ec-product-detail, application-ec-product-list.