## Rating Scale (S—066)

A one-question rating of rising bars that fill on hover, with a plain word for every step.

- URL: https://sundaeui.dev/components/rating-scale
- 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/rating-scale.json`
- Tags: form, radio, survey, nps, rating, feedback

Bars grow from left to right, so the scale reads as “more” without stars or faces. Hovering fills up to the pointer and the word underneath changes with it.
It is a radiogroup: arrow keys move and select, and each option is announced with its number and word. Three to seven steps, as bars or dots.

### Usage

```tsx
import { RatingScale } from '@/components/sundae/rating-scale'

<RatingScale question="How was the handoff?" onValueChange={send} />
```

### Props

- `question` (`string`, required): The question; also labels the group.
- `labels` (`string[]`, default `['Rough','Meh','Okay','Good','Great']`): One word per step, lowest first.
- `value / defaultValue` (`number | null`, default `null`): Controlled or starting rating (1-based).
- `onValueChange` (`(value: number) => void`): Called on select.
- `shape` (`'bars' | 'dots'`, default `'bars'`): Rising bars or a row of dots.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- A single feedback question after a task: a handoff, a support chat, a lesson.
- In-app surveys where stars feel too consumer.

### When not to use

- Net Promoter Score (0–10): eleven bars get too thin; use numbered buttons.
- Picking from unordered options.

### Accessibility

- role="radiogroup" labelled by the question, with roving focus and aria-checked on each option.
- Each option is named "4 of 5, Good", so the meaning does not depend on bar height.
- Reduced motion removes the fill stagger and bounce.

### Keyboard

- Tab: Focus the rating
- ← / →: Lower or raise the rating
- Home / End: Lowest or highest

### FAQ

**Why bars instead of stars?**
Rising bars show an ordered scale with no cultural baggage and sit well in a monochrome product UI.

**Can people clear their rating?**
Not by default. Add a small “Clear” button that sets value to null if your form needs it.