Rating component

Installation

Copy the source with the CLI to own and edit it, or import it from the npm package.

npx aback-ui@latest add rating

Writes components/ui/rating.tsx. First time in this project? Run npx aback-ui@latest init first, as the installation guide shows.

Import the parts you need from the installed file. The Code tab above has a complete, working example.

tsx

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

Props and composition points for Rating. Native element props pass through.

Prop	Type	Default	Description
`value / defaultValue / onValueChange`	`number / number / (value: number) => void`	None	Controlled or uncontrolled rating. 0 means no rating.
`max`	`number`	5	Number of stars.
`name`	`string`	None	Form field name. The checked radio submits its value with a native form.
`readOnly`	`boolean`	false	Displays a value instead of collecting one. Fractions such as 4.5 render as partial stars inside one image with a text alternative.
`clearable`	`boolean`	false	A second press on the selected star clears the rating.
`size / disabled`	`"sm" \| "default" \| "lg" / boolean`	None	Star size and a disabled state.
`getItemLabel / getValueLabel`	`(value, max) => string`	"3 stars" / "Rated 4.5 out of 5"	Accessible names for each option and for the read-only image. Use them to localize.

Dependencies: @tabler/icons-react, plus the shared @/lib/utils helper.

Semantics, keyboard behavior, and the decisions that keep the component operable.

An interactive rating is a native radio group, so screen readers announce "3 stars, radio button, 3 of 5" and form submission works without scripts.
Name the group with aria-label or aria-labelledby pointing at a visible question.
The filled star uses the warning token, which meets non-text contrast. The selected value is also a checked radio, not only a colour.
Read-only ratings are one image with a sentence alternative, not five announced icons.

Key	Action
`Tab`	Enter or leave the rating.
`ArrowRight`or`ArrowUp`	Select one more star.
`ArrowLeft`or`ArrowDown`	Select one fewer star.
`Space`	Select the focused star, or clear it when clearable.

The Aback products whose interfaces shaped this component.