## Star Rating (S—072)

A five-star input with half-star precision on hover, a word for each score and a spring when you set it.

- URL: https://sundaeui.dev/components/star-rating
- Category: Forms & inputs · Art direction: Refined
- Access: Free (no account needed)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/star-rating.json`
- Tags: half-stars, review, stars, rating, input, feedback

Hovering previews the score in half steps, following the pointer within each star; clicking sets it and the chosen stars give a small spring. A word (“Great”, “Okay”) tracks the value.
It is a slider under the hood, so arrow keys step by a half and the value posts with forms.

### Usage

```tsx
import { StarRating } from '@/components/sundae/star-rating'

<StarRating />
```

### Props

- `value / defaultValue` (`number`): 0–5 in steps of 0.5.
- `onValueChange` (`(n: number) => void`): Called on change.
- `half` (`boolean`, default `true`): Allow half stars.
- `name` (`string`): Hidden input name for forms.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Reviews, post-purchase feedback, rating content.

### When not to use

- Single-question satisfaction surveys: a labelled scale is clearer.

### Accessibility

- role="slider" with aria-valuetext such as “3.5 stars, Good”.
- Arrow keys step by a half (or one), Home/End clear or max.
- Reduced motion removes the movement and keeps every state change.

### Keyboard

- ← / →: Decrease / increase
- Home / End: 0 / 5