StarRating

Atom

Five-star rating indicator. Read-only by default with decimal/half-star rendering; pass `readonly={false}` + `onChange` for interactive whole-star selection.

Preview

(312 reviews)

Code

<StarRating value={4.7} size="sm" caption="(312 reviews)" />
<StarRating value={3.5} size="md" />
<StarRating value={2.2} size="lg" />

Preview

Selected: –

Code

const [value, setValue] = useState(0);
<StarRating
  value={value}
  readonly={false}
  onChange={setValue}
  aria-label="Pick a rating"
/>

StarRating

Readonly with decimals

Interactive