Rating

A React component in Beamline's Form controls category.

A score on a small scale: stars that fill as you point (halves too) and light one after another when chosen, with the word for the score beside them; read-only it shows an average to the tenth with its count, and nothing rated yet is hatched; or a 0–10 scale with its two ends named for likelihood questions.

Use it for

Asking for a score: a support reply, a feature, an answer from an agent, a candidate interview (stars, halves allowed).
Showing an average score with how many people gave it (read-only).
A 0–10 likelihood question in a survey (scale).

Not for

Thumbs up or down on an answer (two buttons, as message actions do).
A value on a continuous range (slider).
Choosing between named options (radio-group or segmented-control).

Anatomy

label (above, or for assistive tech only) with description or error under the control
stars: one track of stars, each outlined with its filled share over it
the word for the score (labels) and, read-only, the average and the count
scale: numbered cells 0–10 with the two ends named under them

Variants

0: variant: stars · scale
1: allowHalf (stars)
2: max (stars, default 5); min and max (scale, default 0–10)
3: size: sm · md · lg
4: readOnly: an average to the tenth with count

States

empty (no score yet)
pointing (stars fill up to the pointer, the word follows)
chosen (stars light in turn)
read-only with fractional fill
not rated yet (read-only null: hatched, “No ratings yet”)
disabled
invalid (error under it)

Keyboard

Stars are one slider: → ↑ add a step (a half with allowHalf), ← ↓ take one away, Home clears, End gives the most, a digit sets that many, Backspace clears
Scale is a radio group: arrows move between numbers, the chosen one is the value

Motion

Pointing fills at once (the frequency law). Choosing lights the stars one after another, each swelling a little and settling on the snappy curve without overshoot; the word for the score morphs letter by letter. Clearing drains them at once. Reduced motion: the fill changes without the swell.

Props

Prop	Type	Default	Description
`value / defaultValue / onValueChange`	`number \| null`	—	The score; null is no score.
`variant`	`"stars" \| "scale"`	—	Default stars.
`max`	`number`	—	Stars: how many (default 5). Scale: the top (default 10).
`min`	`number`	—	Scale: the bottom. Default 0.
`allowHalf`	`boolean`	—	Half stars.
`labels`	`string[]`	—	Stars: a word for each whole score ("Poor" … "Excellent"); shown beside the stars.
`ends`	`[string, string]`	—	Scale: what the two ends mean. Default ["Not likely", "Very likely"].
`readOnly`	`boolean`	—	Show a score, such as an average, to the tenth.
`count`	`number`	—	Read-only: how many people rated.
`clearable`	`boolean`	—	Choosing the current score again clears it. Default true.
`label` (required)	`string`	—	The question: "How was this answer?".
`hideLabel / description / error / required / name / disabled`	`…`	—	The field vocabulary every form control shares.
`size`	`"sm" \| "md" \| "lg"`	—	Star size 16 / 20 / 28 px.
`className / classNames / style / ref`	`string / RatingClassNames / CSSProperties / Ref<HTMLDivElement>`	—	The root and its parts (label, track, star, word, cell, ends).

Dependencies

@radix-ui/react-radio-group

Import

import { Rating } from "@/components/rating/rating";

Get it

Rating is part of Beamline: 200+ components and 50+ complete screens for React that your coding agent (Claude Code, Codex, Cursor or any MCP client) installs into your app through Beamline's MCP server, as a ready-built package or as plain React source you can change. $49 launch price, one payment, no subscription, lifetime updates, one licence for your whole team. Get Beamline · Connect your agent