## Likert Matrix (S—246)

A survey grid: rate statements on one agree–disagree scale, stacked on phones and as a true grid on wider cards.

- URL: https://sundaeui.dev/components/likert-matrix
- 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/likert-matrix.json`
- Tags: questionnaire, form, survey, likert, scale, research

On narrow widths each statement shows its own five-point scale; wider containers use a classic grid with column headers. The layout switches by container width.
Answered rows tick off in the progress line; Submit unlocks when every row is answered.

### Usage

```tsx
import { LikertMatrix } from '@/components/sundae/likert-matrix'

<LikertMatrix />
```

### Props

- `items` (`string[]`, required): Statements.
- `scale` (`string[]`): Scale labels.
- `onSubmit` (`(answers: number[]) => void`): Submit callback.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Product research, course feedback, employee surveys.

### When not to use

- A single question: use a rating scale.

### Accessibility

- Each row is a radiogroup labelled by its statement; the scale labels are on every radio.
- Progress is announced.
- Reduced motion removes the movement and keeps every state change.

### Keyboard

- ← / → within a row: Change answer