Forms & Input

RatingInput

Interactive star input with hover preview, keyboard navigation (Arrow keys + Home/End), and optional level labels.

Props

RatingInput extends HTMLAttributes<HTMLDivElement>. Each star is a focusable button; the group is a single tabIndex=0 role="slider".

RatingInputProps props

Prop	Type	Default	Description
`value`	`number`	—	Controlled value.
`defaultValue`	`number`	—	Initial uncontrolled value.
`onChange`	`(value: number) => void`	—	Change handler.
`max`	`number`	`5`	Number of stars.
`size`	`number`	`16`	Star size in px.
`disabled`	`boolean`	—	Prevents interaction.
`clearable`	`boolean`	`true`	Clicking the current value clears it to 0.
`labels`	`string[]`	—	Text for each level, shown beside the stars (index 0 = one star).
`color`	`string`	`var(--m-color-warn)`	Star fill color.

Interactive rating

Good

RatingInput with labels

Disabled RatingInput

RatingInput with 10 stars

ImportTSX

import { RatingInput } from "@solarius/onset";
import type { RatingInputProps } from "@solarius/onset";