# Questionnaire

A multi-step form with one question per screen.

Group: Forms

## Import

```tsx
import { Questionnaire } from "@indoku/ui"
```

## Examples

### Basic usage

```tsx
function QuestionnaireDemo() {
  return (
    <Questionnaire.Root
      onSubmit={(a) => alert(JSON.stringify(a, null, 2))}
      items={[
        {
          name: "build",
          prompt: "What should the agent build next?",
          description: "Choose a direction or describe another task.",
          required: true,
          choices: [
            { value: "timeline", label: "Tool call timeline", description: "Show what the agent ran and what came back." },
            { value: "approval", label: "Approval checkpoints", description: "Ask before sensitive or destructive actions." },
            { value: "handoff", label: "Sub-agent handoffs", description: "Make delegated work and results easier to follow." },
          ],
          input: { placeholder: "Describe another feature…" },
        },
        {
          name: "detail",
          prompt: "How much detail should it include?",
          description: "Skip this if you are not sure yet.",
          multiple: true,
          choices: [
            { value: "focused", label: "Focused" },
            { value: "full", label: "Complete flow" },
          ],
        },
      ]}
    />
  )
}
```

## Props

### Root

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `items` * | `readonly QuestionItem[]` |  |  |
| `defaultValue` | `Answers` |  |  |
| `onSubmit` | `(answers: Answers) => void` |  |  |
| `onStepChange` | `(step: number) => void` |  |  |
| `shortcuts` | `boolean` | `true` | Letter keys (A, B, C…) to pick answers. |
| `labels` | `Partial<Labels>` |  |  |

`*` = required. Style props and HTML attributes are accepted too.