Rating

Collects a discrete numeric score with 44px native radio choices and an optional clear action.

Preview

In action

A clear score

When to use

Use it for

An explicit score on a short, ordered scale.
Clearable feedback where no rating is distinct from the lowest score.

Not for

Unordered choices; use Radio.
Large or continuous numeric ranges; use Slider or NumberField.

Install

Three ways in. They share one source, so the pixels match whichever you pick.

1. Import the package

npm install @noorddev/vlak-react

// once, next to your app's root
import "@noorddev/vlak-react/css";

import { Rating } from "@noorddev/vlak-react";

Precompiled React and one stylesheet. No compiler to configure. Per-component imports work too: @noorddev/vlak-react/components/rating.

2. Vendor the source

npx @noorddev/vlak-cli add rating

The StyleX leaf lands in components/vlak/ with its dependencies, for your own compiler to own. See StyleX.

3. Through shadcn

npx shadcn add https://vlak.dev/r/rating.json

The same registry item, installed by shadcn's CLI.

CSS only

<link rel="stylesheet" href="node_modules/@noorddev/vlak/css/vlak.css" />

No React. Link vlak.css and use the markup and classes below.

React

import { Rating } from "@noorddev/vlak-react";

<Rating label="How useful was this?" name="usefulness" max={5} defaultValue={4} getLabel={(value, max) => `${value} out of ${max}`} />

Props

Rating

A discrete score using native radios; zero means no rating.

Prop	Type	Default
`value`	`number`
`defaultValue`	`number`	`0`
`onValueChange`	`(value: number) => void`
`max`	`number`	`5`
`label`	`ReactNode`	`"Rating"`
`getLabel`	`(value: number, max: number) => string`	(score, total) => `${score} of ${total}`
`clearable`	`boolean`	`true`
`clearLabel`	`string`	`"Clear rating"`
`required`	`boolean`

Also accepts Omit<FieldsetHTMLAttributes<HTMLFieldSetElement>, "onChange" | "defaultValue">.

Keyboard

Keys	Does
`Tab`	Enters the native radio group at its current choice and reaches Clear.
`Arrow keys`	Moves and selects among the native radio choices.
`Space`	Selects a focused radio or activates Clear.

Accessibility

The fieldset legend names the score; getLabel gives each choice a complete name such as 3 of 5.
Selection changes the full choice surface. Each choice is 44px with a 4px corner and a visible focus outline.
Zero means no rating. max is limited to 1–10 whole choices. required uses native radio-group validation.
name submits the selected score. The ref reaches the fieldset; uncontrolled values reset with the form.

Markup

<fieldset class="rs-rating"><legend class="rs-rating-legend">Usefulness</legend><div class="rs-rating-choices"><label class="rs-rating-choice">1<input class="rs-rating-input" type="radio" name="usefulness" value="1" aria-label="1 of 3" /></label><label class="rs-rating-choice rs-rating-selected">2<input class="rs-rating-input" type="radio" name="usefulness" value="2" aria-label="2 of 3" checked /></label><label class="rs-rating-choice">3<input class="rs-rating-input" type="radio" name="usefulness" value="3" aria-label="3 of 3" /></label></div></fieldset>

Classes

.rs-rating.rs-rating-legend.rs-rating-choices.rs-rating-choice.rs-rating-selected.rs-rating-input.rs-rating-clear

Depends on

/button