Rating

Pro

Star rating with half-star precision where stars light up under your finger as you drag. A word below changes from Awful to Great as you go, and taps and screen readers work too.

Preview

Installation

npx @lumioui/cli add pro/rating

Usage

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

Examples

Class review

Post-class review in a studio-booking app.

Readonly

Display-only stars in a bookstore search list: small stars, the score and count beside them, one row per title.

API reference

Prop Type Default
value number

Controlled rating, 0..max (0.5 steps when allowHalf).

 —
defaultValue number

Uncontrolled initial rating. Default 0.

 0
onChange (value: number) => void

Commits — on release, tap, key or screen-reader action.

 —
onValueChange (value: number) => void

The live value while dragging, once per step.

 —
max number

Number of stars. Default 5.

 5
size number

Star size in px. Default 32.

 32
allowHalf boolean

Half-star precision. Default false.

 false
allowClear boolean

Tapping the current score clears it to 0. Default false.

 false
readonly boolean

Display-only — still announces the rating, removes the input role.

 false
disabled boolean

Non-interactive input — keeps the adjustable role but ignores touches and dims the row (distinct from readonly, which is pure display).

 false
labels
boolean | readonly string[] … boolean | readonly string[] | ((value: number) => string)

A word under the row that swaps in place with the score. true uses Awful / Poor / Okay / Good / Great; pass one word per star, or a function.

 —
emptyLabel string

Word shown while nothing is rated. Default "Tap or drag to rate".

 "Tap or drag to rate"
color string

Star light colour. Default the theme's warning (amber).

 —
glow boolean

@deprecated No longer draws anything — Lumio dropped the glow under the row.

 —
className string —