Rating

Star-based rating control supporting read-only and interactive modes.

Examples

Read Only

<Rating value={3} isReadOnly />

Interactive

1 star2 stars3 stars4 stars5 stars

<Rating value={2} onChange={() => {}} />

Disabled

<Rating value={4} isDisabled />

Sizes

<div style={{display: 'flex', flexDirection: 'column', gap: '1rem'}}>
  <Rating isReadOnly size="sm" value={3} />
  <Rating isReadOnly size="md" value={3} />
  <Rating isReadOnly size="lg" value={3} />
</div>

Custom Count

<Rating value={7} count={10} isReadOnly />

Empty

1 star2 stars3 stars4 stars5 stars

<Rating value={0} onChange={() => {}} />

Custom Colors

<div style={{display: 'flex', flexDirection: 'column', gap: '1rem'}}>
  <Rating emptyColor="gray" filledColor="red" isReadOnly value={3} />
  <Rating emptyColor="gray" filledColor="green" isReadOnly value={4} />
  <Rating emptyColor="gray" filledColor="blue" isReadOnly value={2} />
</div>

API

Rating

Star-based rating control supporting read-only and interactive modes.

Prop	Type	Default	Description
className	string	—	Additional CSS class names applied to the rating root.
count	number	5	Number of stars to display.
data-testid	string	—	Test ID applied to the rating root.
emptyColor	"error" | "info" | "success" | "warning" | "primary" | "red" | "orange" | "yellow" | "green" | "teal" | "cyan" | "blue" | "purple" | "pink" | "gray" | "secondary" | "accent" | "disabled" | "inherit" | "tertiary"	'disabled'	Color of unfilled stars.
filledColor	"error" | "info" | "success" | "warning" | "primary" | "red" | "orange" | "yellow" | "green" | "teal" | "cyan" | "blue" | "purple" | "pink" | "gray" | "secondary" | "accent" | "disabled" | "inherit" | "tertiary"	'yellow'	Color of filled stars.
isDisabled	boolean	false	Whether the rating is disabled.
isReadOnly	boolean	false	Whether the rating is read-only.
label	string	'Rating'	Accessible label for the rating group.
onChange	(value: number) => void	—	Called when the selected rating changes.
ref	Ref<HTMLDivElement>	—	Ref forwarded to the rating root.
size	"sm" | "md" | "lg"	'md'	Size of the star icons.
style	CSSProperties	—	Inline styles applied to the rating root.
value*	number	—	Current rating value.