How to build an accessible RatingGroup in React

Each star is a <button role="radio"> inside a role="radiogroup" with aria-checked on the selected value and an aria-label like "3 of 5 stars"; when readOnly or disabled the stars drop out of the tab order so a non-interactive rating is not announced as actionable.

When to use a RatingGroup

• Capturing a discrete subjective rating on a small fixed scale (e.g. 1–5 stars)
• Displaying an existing rating read-only as a compact star summary

When not to use it

• Choosing along a continuous or large numeric range — use Slider
• Entering an exact bounded number with steppers — use NumberInput
• A non-rating single choice among labeled options — use Radio or SegmentedControl

Keyboard interactions

Role radiogroup, verified at WCAG 2.2-AA.

• Tab
• Space
• Enter

Common mistakes

Avoid: <Slider min={1} max={5} step={1} /> labeled as a star rating

Prefer: <RatingGroup value={rating} onValueChange={setRating} />

A slider communicates a continuous magnitude; RatingGroup uses radio semantics so each star is an exclusive discrete choice announced as "N of M stars"

Example

<RatingGroup value={3} onValueChange={() => {}} />

See the full RatingGroup reference →