Rating

Star rating with fractional display, half-star input, hover preview, and keyboard support. Interactive mode is built on the reka-ui Rating primitives (a radiogroup with one radio per step); readonly mode renders a static star row so any decimal value stays exact.

Default

Interactive 5-star rating with v-model.

Fractional display

Any decimal value renders a partially filled star.

3.7

Half-star input

Maps to reka-ui step=0.5, so each star renders two radios: click or arrow onto the left half for a .5 value.

2.5

Show value

Display the numeric value beside the stars. It follows the hover preview while the pointer is over the stars.

4.0

Clearable

Click the current value again to reset the rating to 0.

Click star 3 again to clear

Custom length

Any number of stars via max, which maps to reka-ui length.

7.0

Sizes

sm, default, lg.

Colors

yellow (default), warning, primary, foreground.

Per-star classes

starClass reaches every star wrapper, for hover or transition effects.

Readonly

Display-only, no hover or keyboard.

4.2

Disabled

Dimmed and non-interactive for forms.

Composing the primitives

What Rating builds on. Use the reka-ui primitives directly when you need a shape this component does not cover — a different indicator, custom layout, or your own state handling.

Value: 2.5

API Reference

Rating

Prop	Type	Default	Description
`modelValue`	`number`	`0`	Current rating. Supports v-model. Clamped to [0, max]. Fractional values render partial fills; in interactive mode a value off the step grid (e.g. 3.7 with step 1) still shows the partial fill but leaves no radio checked.
`max`	`number`	`5`	Number of stars. Forwards to RatingRoot length.
`size`	`"sm" \| "default" \| "lg"`	`"default"`	Star and gap size.
`readonly`	`boolean`	`false`	Display-only. Renders a static role="img" star row instead of a radiogroup, so any decimal renders exactly and there are no focus stops.
`disabled`	`boolean`	`false`	Dimmed and non-interactive. Forwards to RatingRoot disabled and turns off hover preview.
`showValue`	`boolean`	`false`	Render the numeric value next to the stars. Follows the hover preview.
`allowHalf`	`boolean`	`false`	Allow half-star selection. Maps to reka-ui step=0.5, so arrows also move in 0.5 increments.
`clearable`	`boolean`	`false`	Clicking the current value resets the rating to 0. Forwards to RatingRoot clearable.
`color`	`"yellow" \| "warning" \| "primary" \| "foreground"`	`"yellow"`	Filled-star color. Default yellow matches the ReUI rating.
`class`	`string`	`undefined`	Classes for the root container.
`starClass`	`string`	`undefined`	Classes for each star wrapper.

Event	Description
`update:modelValue`	Fires on click or keyboard change with the new rating. Enables v-model. With clearable, clicking the current value emits 0.

RatingRoot (reka-ui)

Prop	Type	Default	Description
`modelValue`	`number`	`undefined`	Controlled rating value. Supports v-model.
`defaultValue`	`number`	`undefined`	Initial value when uncontrolled.
`length`	`number`	`5`	How many items (stars) to render. Exposed as the items slot prop.
`step`	`number`	`1`	Increment between selectable values. 0.5 gives two radios per star.
`clearable`	`boolean`	`false`	Selecting the current value resets it to 0.
`hoverable`	`boolean`	`false`	Track a hover preview; indicators up to the hovered step get data-state="active".
`disabled`	`boolean`	`false`	Blocks selection and hover tracking.
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	Arrow-key axis of the underlying roving focus group.
`loop`	`boolean`	`true`	Wrap focus from the last item back to the first. Rating passes false.
`name / required`	`string / boolean`	`undefined`	Native form integration, forwarded to the radio group.
`as / asChild`	`string \| Component / boolean`	`undefined`	Render element or delegate rendering to the child.

Event	Description
`update:modelValue`	Fires with the newly selected value.

Slot	Description
`default`	Slot props { items, modelValue }, where items is [1..length].

RatingItem (reka-ui)

Prop	Type	Default	Description
`item`	`number`	—	1-based index of this star. Required.
`as / asChild`	`string \| Component / boolean`	`"label"`	Render element. Rating renders it as a span.

Slot	Description
`default`	Slot prop { steps }: the selectable stops inside this star, e.g. [0.5, 1] when step is 0.5.

RatingItemIndicator (reka-ui)

Prop	Type	Default	Description
`step`	`number`	—	The stop this indicator represents. Required. Renders a radio button.
`as / asChild`	`string \| Component / boolean`	`undefined`	Render element or delegate rendering to the child.

Event	Description
`data-state="active"`	Data attribute, not an event: present when step <= the hovered value (or the model value when not hovering). Style the filled state with data-[state=active]:*.

Slot	Description
`--reka-rating-item-step-width`	CSS variable: how much of the star this stop covers (50% for a half step). Apply it as the indicator width with overflow-hidden to clip the icon.
`--reka-rating-item-step-opacity`	CSS variable: 0 for fractional stops that are neither focused, hovered nor selected. Rating does not bind it — it derives from document.activeElement and so mismatches during hydration; colouring the inactive state (text-transparent until data-state="active") covers the same need.
`--reka-rating-item-step-z-index`	CSS variable: stacking order, putting the smaller stop on top so pointer hit-testing picks the half first.

Accessibility

Keyboard shortcuts and ARIA behavior.

Shortcut	Description
`Tab`	Enters or leaves the rating. Roving tabindex: only the selected star (or the first) is a tab stop.
`ArrowRight`	Moves to the next star and selects it (0.5 steps with allowHalf).
`ArrowLeft`	Moves to the previous star and selects it.
`ArrowUp`	Same as ArrowRight.
`ArrowDown`	Same as ArrowLeft.
`Space`	Selects the focused star.
`Home`	Sets the rating to 0.
`End`	Sets the rating to max.

Interactive ratings render a radiogroup with one radio per step; each radio is labelled "N of max" and exposes aria-checked.
Readonly ratings render a static role="img" with an aria-label describing the value — no radios and no focus stops.
Provide an aria-label (e.g. "Product rating") to name the group; it forwards to the root element.
Arrows cannot reach 0 because there is no radio for it — use Home, or clearable to clear by clicking the current value.
Star icons are aria-hidden; the value is conveyed by the radios (interactive) or the root aria-label (readonly).

Radio Group Resizable