Rating

A five-item rating row for native inputs, custom controls, or read-only display. These classes belong to the opt-in Official preset. Add @presets "standard,official"; to the CSS entry. Standard supplies the utilities, palette, and preflight used alongside these structural shortcuts.

Classes

• rating

Example

The markup below shows the structure. Follow the linked Storybook specimen for its complete styling and, where relevant, interactive behavior.

<span class="rating" role="img" aria-label="Rated 3 out of 5">
  <span>★</span><span>★</span><span aria-current="true">★</span>
  <span>★</span><span>★</span>
</span>

Variants and composition

Direct child inputs, ARIA radio controls, or read-only marks all share rating geometry. The selected/current item and preceding values receive full opacity.

Behavior and accessibility

Native radio inputs are the simplest interactive rating. A custom ARIA radiogroup needs roving focus plus arrow/Home/End keys; a read-only score needs one accessible description.

Do not clip the rating’s overflow: focus outlines must remain visible. For custom stars, shape the child’s ::before rather than clipping the focus owner, and hide that decorative shape in forced colors so native input marks remain readable. The preset restores native radio appearance in forced colors and removes reduced-motion transitions.

Reference

See the interactive Storybook specimen ↗. Continue to Select or return to the Official preset overview.