Rating

A controlled star rating. Click a star to set the value, or focus it and use the arrow keys. The selected value is stored in state and reflected below.

Set readOnly to render the rating as a non-interactive display — perfect for showing an average score next to a label.

With precision="half", each star is split into two selectable halves so users can pick values in 0.5 increments.

Three preset sizes — sm, md, and lg — control the icon dimensions and the gap between stars.

Pass any React element to the icon prop to replace the default star. The component clones it and applies fill-current for the filled portion — here with a lucide Heart.