# Rating

- Page: <https://kznlabs.github.io/labsUI/components/rating>

## Rating (`rating`, component)

Star rating on native radios (arrow keys, forms) with hover preview, or readOnly display with fractional stars for averages.

- Install: `npx @kznlabs/labsui add rating`
- Docs: <https://kznlabs.github.io/labsUI/components/rating>
- Brings: use-controllable-state, utils
- npm: clsx@^2.1.1, lucide-react@1.63.0, motion@14.7.1, tailwind-merge@^3.7.0

### API

- `<Rating>`: Star rating. Interactive: native radios (arrow keys, forms, screen readers) with a hover
preview and a spring lift/press on the stars. `readOnly`: an image of the score, fractions included.
  - `defaultValue?: number` = `0`: Rating at first render (uncontrolled).
  - `label?: string` = `"Rating"`: Group label (visually hidden).
  - `max?: number` = `5`: Number of stars.
  - `name?: string`: Form field name for the chosen value.
  - `onValueChange?: (value: number) => void`: Called with the picked rating.
  - `readOnly?: boolean` = `false`: Display only: renders fractions (4.6) as a partially filled star, no inputs.
  - `size?: "sm" | "default"` = `"default"`: Star size.
  - `value?: number`: Controlled rating; pair with `onValueChange`.

### Usage

```tsx
<Rating value={stars} onValueChange={setStars} name="stars" /> · <Rating readOnly value={4.6} size="sm" />
```

### Example: product-rating.tsx

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

export function ProductRating({ average, count }: { average: number; count: number }) {
  return (
    <div className="flex items-center gap-2 text-sm">
      <Rating readOnly value={average} size="sm" />
      <span className="font-medium">{average}</span>
      <span className="text-muted-foreground">· {count} reviews</span>
    </div>
  );
}
```