# Interview

A conversation instead of a form: one question at a time, letter keys for choices, branching, a review before sending and an honest submit.

- Family: Signature, imported from `mizu-ui` or `mizu-ui/signature`
- Docs: https://mizu.user64bit.world/components/interview
- Source: https://github.com/0xuser64bit/mizu/blob/main/packages/mizu/src/signature/Interview.tsx

## Usage

```tsx
"use client";

import { Interview } from "mizu-ui";

export function Example() {
  return (
    <Interview
      label="Feedback"
      onSubmit={(answers) =>
        localStorage.setItem("mizu-feedback", JSON.stringify(answers))
      }
      questions={[
        {
          id: "role",
          title: "What do you do most days?",
          type: "choice",
          required: true,
          options: [
            { value: "design", label: "Design" },
            { value: "code", label: "Engineering" },
          ],
        },
        {
          id: "score",
          title: "How was your week?",
          type: "scale",
          min: 1,
          max: 5,
        },
        { id: "note", title: "Anything else?", type: "long" },
      ]}
    />
  );
}
```

## Copy it with the shadcn CLI

```sh
npx shadcn@latest init 0xuser64bit/mizu/preset # once, where there is no components.json
npx shadcn@latest add 0xuser64bit/mizu/interview
```

## Props

- `label / questions`: `string / InterviewQuestion[]`. id, title, description, type (text, long, email, number, choice, multi, scale, yesno), options, required, min, max, validate and next.
- `answers / defaultAnswers / onAnswersChange`: `Record<string, InterviewAnswer>`. Answers by question id.
- `onSubmit`: `(answers) => void | Promise`. Resolve to finish; throw to keep everything and offer a retry.
- `intro / done`: `{ title, body, start } / ReactNode`. Optional welcome screen and the completion message.
- `submitLabel`: `string` (default `"Send answers"`). The review screen's action.

## Keyboard

- Enter: Continue (Ctrl + Enter in long answers)
- A B C …: Choose an option; multiple choice toggles
- Y N: Answer a yes-or-no question
- 1 … 9 0: Pick a score (0 is ten)

## Accessibility

Each question is a labelled form; focus moves to its first field. Choices are real radio or checkbox groups with letter shortcuts as an enhancement; the scale is a radio group. Errors are alerts linked to the field. Progress is a progressbar, and each new question, the review and the result are announced.

## Motion

Questions rise in going forward and settle downward going back. A single choice blinks twice to confirm and moves on by itself; a rejected answer shakes once. The progress hairline stretches and a diamond seal turns into place when it is sent. Reduced motion keeps every state without travel or blinking.