# Rating

Rating is a neobrutalist React component from Cruise UI. Stars filled with --primary and outlined in ink, with the number next to them: read-only (halves) or pick-a-score.

Install (with the @cruiseui registry in components.json, see Installation):

```bash
npx shadcn@latest add @cruiseui/rating
```

Import: `import { CruiseRating } from "@/components/cruise/rating";`

## When to use

Showing an average score (4.5 · 120 reviews), or asking for one.

## When not to

Anything that isn't a score out of a few stars (use a Slider or a Select).

## Example (React)

```tsx
"use client";

import { useState } from "react";
import { CruiseRating } from "@/components/cruise/rating";

export default function RatingExample() {
  const [mine, setMine] = useState(0);
  return (
    <div className="flex flex-col gap-6">
      <CruiseRating value={4.5} count={120} label="Average rating" />
      <CruiseRating value={mine} onChange={setMine} label="Your rating" />
    </div>
  );
}
```

## HTML

Needs theme.css (https://cruiseui.dev/theme.css).

```html
<span class="rating">
  <span class="rating-stars" role="img" aria-label="Average rating: 4.5 out of 5"><!-- 5 × <span class="rating-star"> with a filled layer clipped to the value --></span>
  <span aria-hidden="true"><span class="rating-value">4.5</span> <span class="rating-count">· 120 reviews</span></span>
</span>
<fieldset class="rating rating-input">
  <legend class="field-label">Your rating</legend>
  <span class="rating-stars">
    <label class="rating-option"><input class="visually-hidden" type="radio" name="score" value="1" aria-label="1 star"><span class="rating-star" aria-hidden="true"><!-- star svg --></span></label>
    <!-- … 2 to 5 -->
  </span>
</fieldset>
```

## Props: CruiseRating

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `value` | `number` | — | 0 to max; read-only ratings may have halves (4.5). |
| `max?` | `number` | `5` | — |
| `count?` | `number` | — | Number of reviews, shown as "· 120 reviews". |
| `label?` | `string` | `"Rating"` | Accessible name, e.g. "Your rating". |
| `onChange?` | `((value: number) => void)` | — | Makes it interactive (whole stars). |
| `showValue?` | `boolean` | `true` | — |
| `className?` | `string` | — | — |

## Accessibility

- Read-only: one image named "Average rating: 4.5 out of 5".
- Interactive: native radios in a fieldset, so arrow keys work; each star is named "4 stars".
- The number is shown, so the stars never carry the score alone.