Phoundry UI

StarRating

Interactive star rating with hover preview, half-star support, keyboard navigation (arrow keys, Home/End), and click-to-toggle.

import { StarRating } from 'phoundry-ui';

Interactive

Rating: 3

Show code 
<StarRating
  rating={rating}
  onchange={(v) => rating = v}
/>

Half Stars

Rating: 3.5

Show code 
<StarRating
  rating={rating}
  allowHalf
  onchange={(v) => rating = v}
/>

Readonly

4 / 5
2.5 / 5
Show code 
<StarRating rating={4} readonly />
<StarRating rating={2.5} readonly allowHalf />

Custom max (10 stars)

max adjusts star count and aria-valuemax; keyboard Home/End still jump to 0 / max.

Value: 7 / 10

Show code 
<StarRating rating={score} max={10} onchange={(v) => score = v} />

Sizes

xs
sm
md
lg
Show code 
<StarRating rating={3} size="xs" readonly />
<StarRating rating={3} size="sm" readonly />
<StarRating rating={3} size="md" readonly />
<StarRating rating={3} size="lg" readonly />

Props

PropTypeDefaultDescription
rating requirednumber—Current rating value.
readonly booleanfalseDisable interaction.
size 'xs' | 'sm' | 'md' | 'lg''md'Star size (12/16/20/24px). xs uses tighter padding for dense readonly rows.
max number5Total number of stars.
allowHalf booleanfalseEnable half-star increments.
onchange (rating: number) => void—Called when the rating changes.
class string—Additional CSS classes.

Usage tips

  • Click a star to set the rating; click the same star again to reset to 0.
  • With allowHalf, clicking the left half of a star sets a half-star value.
  • Use readonly for display-only ratings (e.g. product reviews, averages).
  • Use size="xs" for dense readonly rows (thumbnail captions, compact table cells); it uses tighter padding than larger sizes.
  • Keyboard: Arrow keys adjust by 1 (or 0.5 with allowHalf), Home = 0, End = max.