# Rating

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.

> Primitive · Pro · Forms & Inputs — React Native, Expo Go incompatible (dev build required).

## Install

```bash
npx @lumioui/cli add pro/rating
```

## Import

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

## Variants

- `interactive` — Class review: `npx @lumioui/cli add pro/rating-interactive`
- `readonly` — Readonly: `npx @lumioui/cli add pro/rating-readonly`

## Props

| Prop | Type | Notes |
| --- | --- | --- |
| `value?` | `number` | Controlled rating, 0..max (0.5 steps when allowHalf). |
| `defaultValue?` | `number` | Uncontrolled initial rating. Default 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. |
| `size?` | `number` | Star size in px. Default 32. |
| `allowHalf?` | `boolean` | Half-star precision. Default false. |
| `allowClear?` | `boolean` | Tapping the current score clears it to 0. Default false. |
| `readonly?` | `boolean` | Display-only — still announces the rating, removes the input role. |
| `disabled?` | `boolean` | Non-interactive input — keeps the adjustable role but ignores touches  and dims the row (distinct from readonly, which is pure display). |
| `labels?` | `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". |
| `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` | — |

Source: https://lumioui.com/components/rating