Constellation Rating React Component

LIVE PREVIEWInteract with the component

Just React. No extra dependencies.

Copy the component and its CSS module into your project.

CSS Modules

Usage

Matches your current playground settings.

import ConstellationRating from "./ConstellationRating";

export default function Example() {
  return (
    <ConstellationRating
      defaultValue={3}
      count={5}
      color={"#d8b77e"}
      label={"How did it feel?"}
      disabled={false}
    />
  );
}

Using Constellation Rating

Use value and onValueChange to store a rating, or defaultValue for local state. The component uses native radio inputs, including arrow-key navigation and form submission.

Use formatLabel to localise each option or describe what its rating means. Hover previews a rating without committing it; touch and keyboard selection update the value directly.

Props

Name	Type	Required	Default	Description
value	number	No	undefined	Controlled rating.
defaultValue	number	No	0	Initial rating, with zero meaning no selection.
onValueChange	function	No	undefined	Receives the selected rating from one through count.
count	number	No	5	Maximum rating, from 1 to 10.
color	string	No	"#d8b77e"	Selected star colour.
label	string	No	"Rating"	Visible group label.
formatLabel	function	No	undefined	Receives a rating and maximum to create a localised radio label.
disabled	boolean	No	false	Disable all rating options.
name	string	No	undefined	Optional radio group name for form submission.
className	string	No	""	Additional classes on the root element.
style	CSSProperties	No	undefined	Inline styles for sizing, typography and appearance.