Rating Input

Star rating. Free, MIT · Forms and input › Checkboxes and sliders

Installation

npx valyro-cli@latest add rating-input

npx shadcn@latest add https://valyro.xyz/r/rating-input.json

npm install valyro-ui

import 'valyro-ui/styles.css';
import { RatingInput } from 'valyro-ui';

Prop	Type	Default
`value`	`number`		Controlled `value`; use with `onValueChange`.
`defaultValue`	`number`	`0`	Initial `value` when uncontrolled.
`onValueChange`	`(value: number) => void`		Called with the new `value` when it changes.
`max`	`number`	`5`	Number of stars.
`allowHalf`	`boolean`	`false`	Allow x.5 values (each star has a left and right half).
`readOnly`	`boolean`	`false`	Display only; fractional values like 4.3 render as partial stars.
`disabled`	`boolean`	`false`	Dims the stars and ignores input; the rating is not submitted with the form.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Star size: 16 / 20 / 28px.
`invalid`	`boolean`	`false`	Empty stars turn the danger color (`aria-invalid`). Also shown after a submit attempt while a required rating is missing.
`valueLabels`	`string[]`		Text per whole star, e.g. ["Bad", …, "Excellent"]; shown next to the stars for the hovered or chosen value.
`getValueLabel`	`(value: number, max: number) => string`	`defaultValueLabel`	Accessible name of a value (each star, and the whole read-only rating). Default: "4 out of 5".
`name`	`string`		Submits the rating with the surrounding form as a number ("3.5"; empty when unrated). Not for `readOnly`.
`required`	`boolean`		Blocks native form submission while nothing is rated.