# Rating

A React component in [Beamline](https://beamline.io/)'s [Form controls](https://beamline.io/components/forms) category. Live demo: https://beamline.io/components/rating

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](https://beamline.io/components/message) actions do).
- A value on a continuous range ([slider](https://beamline.io/components/slider)).
- Choosing between named options ([radio-group](https://beamline.io/components/radio-group) or [segmented-control](https://beamline.io/components/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

```tsx
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](https://beamline.io/checkout?pack=complete) · [Connect your agent](https://beamline.io/connect)

## More in Form controls

- [Color Palette](https://beamline.io/components/color-palette): A wheel of preset colours to pick from: twelve hues around the ring, their tints inward, white at the middle; the chosen swatch lifts and carries a check.
- [Rich text editor](https://beamline.io/components/rich-text-editor): A Notion-grade writing surface: slash menu for every block, a formatting toolbar on selection, drag-to-move blocks, nesting, markdown shortcuts, paste…
- [Allocation editor](https://beamline.io/components/allocation-editor): Parts of a fixed whole edited as transfers: an ordered strip whose boundaries drag or step between neighbours and a roster of exact amounts where typing…
- [Radio cards](https://beamline.io/components/radio-cards): One choice among rich options as cards with optional media, icon, detail and a figure; one selection ring follows the stable choice.
- [Calendar](https://beamline.io/components/calendar): Month grids for picking a day or a range: a real grid with arrows by day and week, Page keys by month, closed days, today's dot, and a range span that…
- [Availability rule editor](https://beamline.io/components/availability-rule-editor): When someone (or something) can be booked: hours for each day of the week, one or more ranges a day, a day turned off, a day's hours copied to the others…
- [Recurrence editor](https://beamline.io/components/recurrence-editor): How something repeats, set in plain controls and said back in a sentence: every N days, weeks, months or years; which weekdays; in a month, on a date or…
- [Signature pad](https://beamline.io/components/signature-pad): A pad for a drawn signature whose ink follows a stylus's pressure (and thins with speed under a mouse or finger); undo, replay, PNG or SVG export, and…
- [Image cropper](https://beamline.io/components/image-cropper): Frame a picture before it is saved: a fixed window (square, round for avatars, wide for covers, or free with handles) over the picture, which you drag…
- [Input Dissolve](https://beamline.io/components/input-dissolve): A one-line field whose text breaks into specks and drifts off once it is sent, last letter first; the field is empty and ready again.
- [Password field](https://beamline.io/components/password-field): A password field with a reveal control, and a strength meter when a password is being created.
- [Card field](https://beamline.io/components/card-field): A payment card in one field: the number groups as it is typed and names its network, the expiry and security code follow on their own as each part…
- [File drop zone](https://beamline.io/components/file-dropzone): A generous target for files: drop or choose, each checked against type, size and count with the reason when turned away; uploads show progress and can be…
- [Slider](https://beamline.io/components/slider): A value or range on a known scale: the thumb grows under the finger and shows its value while dragged or focused; marks, end icons and a value readout.
- [Date range picker](https://beamline.io/components/date-range-picker): A reporting range: presets on one side and two months on the other (one on a phone); the trigger names the preset in use, and the footer counts the days.
- [OTP input](https://beamline.io/components/otp-input): A verification code in separate boxes backed by one real field, so paste, SMS autofill and Backspace work; optional groups like 123–456.
- [Segmented control](https://beamline.io/components/segmented-control): Two to five views or ranges of the same content (1D / 1W / 1M, List / Board): a radio group whose raised thumb slides to the choice.
- [Colour picker](https://beamline.io/components/color-picker): A swatch that opens a picker: saturation-brightness plane, hue strip, HEX/RGB/HSL/OKLCH value to type or copy, the screen eyedropper where available…
- [Chip group](https://beamline.io/components/chip-group): Quick filters as chips: a chosen chip fills and grows a check, counts show what each would return, and extra chips fold behind “+N”.
- [Shortcut recorder](https://beamline.io/components/shortcut-recorder): Lets people set their own shortcut: press the keys, see them as keycaps; a clash or a browser-kept shortcut asks first. ShortcutCheatsheet lists every…
- [Mention input](https://beamline.io/components/mention-input): A composer where @people and #channels become single tokens with suggestions at the caret; the value keeps the text and where each mention sits.
- [Tag input](https://beamline.io/components/tag-input): Short free-form values as tags: Enter, comma or Tab adds, a pasted list adds them all, Backspace twice removes the last; duplicates and invalid values…
- [Multi-select](https://beamline.io/components/multi-select): Several values from a known list as removable chips in the field; the list has a search field (for long lists), checkable rows and a count with Clear.
- [Tree select](https://beamline.io/components/tree-select): A field that picks from a tree: departments and teams, categories and subcategories, folders, regions and cities; the list opens as an indented tree…
- [Combobox](https://beamline.io/components/combobox): One value from a long list found by typing (time zones, countries, customers): ranked matches with the match emphasised, keywords, optional group…
- [Phone input](https://beamline.io/components/phone-input): A phone number with its country: searchable picker with country and dialling codes, “+44…” switches the country, the number groups as typed, and the…
- [Date picker](https://beamline.io/components/date-picker): One date in a form: a field that opens the month grid under it with focus inside, picks and closes; Today and Clear below, optional clear button.
- [Time picker](https://beamline.io/components/time-picker): A time of day as hour and minute segments, typed or stepped, 12- or 24-hour; the clock opens a list of times at the step.
- [Number field](https://beamline.io/components/number-field): A bounded number with − and +: arrows and Page keys step, typing is read in the locale and clamped on leaving, limits can be explained, and the label can…
- [Inline edit](https://beamline.io/components/inline-edit): Text that becomes a field in the same place: Enter (or ⌘Enter when multiline) saves, Escape cancels, leaving saves; saving shows progress and a refusal…
- [Search field](https://beamline.io/components/search-field): The search entry point: magnifier, clear button, Escape to clear, a shortcut hint and an optional live border beam.
- [Switch](https://beamline.io/components/switch): A setting that applies at once: a thumb that slides on a spring and stretches under the finger, with an optional label before or after.
- [Form](https://beamline.io/components/form): Validation wiring for react-hook-form (and zod) on the system's own fields: each field already links its label, help and error, so FormField hands over…
- [Select](https://beamline.io/components/select): One choice from a short known list, in the same frame as every text field: label, help, error, option groups and details.
- [Toggle group](https://beamline.io/components/toggle-group): Pressable toggles where one or several can be on: alignment, bold and italic, view options; bare for toolbars or framed.
- [Input](https://beamline.io/components/input): A single-line text field with its label, help and error wired for assistive tech, three sizes and adornments.
- [Checkbox](https://beamline.io/components/checkbox): A yes/no choice with an optional label and help, including the mixed state for select-all; the check draws itself in.
- [Radio group](https://beamline.io/components/radio-group): One choice from a short visible set, each option with an optional description, vertical or in a row.
- [Textarea](https://beamline.io/components/textarea): Multi-line plain text that grows with what is typed up to a limit, with an optional character count.
- [Label](https://beamline.io/components/label): The text label tied to a form control, with a required marker that screen readers announce.