# Questionnaire

> Multi-step questions with single, multiple, and freeform answers.

Registry name: `questionnaire`. HTML docs: https://ui.anuragroy.dev/component/questionnaire.

## Install

```bash
npx shadcn@latest add https://ui.anuragroy.dev/r/questionnaire.json
```

If the website is down: `npx shadcn@latest add https://raw.githubusercontent.com/anurag-roy/ui.anuragroy.dev/main/public/r/questionnaire.json`.

Registry JSON: https://ui.anuragroy.dev/r/questionnaire.json (GitHub: https://raw.githubusercontent.com/anurag-roy/ui.anuragroy.dev/main/public/r/questionnaire.json).

## Import

Import paths follow the consumer `components.json` aliases. After a default install:

```tsx
import {
  Questionnaire,
  QuestionnaireActions,
  QuestionnaireChoice,
  QuestionnaireChoices,
  QuestionnaireItem,
  QuestionnaireNext,
  QuestionnairePrevious,
  QuestionnaireProgress,
  QuestionnaireSubmit,
  QuestionnaireTitle
} from "@/components/ui/questionnaire"
```

## Usage

```tsx
import {
  Questionnaire,
  QuestionnaireActions,
  QuestionnaireChoice,
  QuestionnaireChoices,
  QuestionnaireItem,
  QuestionnaireNext,
  QuestionnairePrevious,
  QuestionnaireProgress,
  QuestionnaireSubmit,
  QuestionnaireTitle,
} from "@/components/ui/questionnaire"

export function Example() {
  return (
    <Questionnaire
      items={[{ name: "direction", required: true, choices: [{ value: "timeline" }] }]}
      onSubmit={(event) => event.preventDefault()}
    >
      <QuestionnaireProgress />
      <QuestionnaireItem name="direction" required>
        <QuestionnaireTitle>What next?</QuestionnaireTitle>
        <QuestionnaireChoices>
          <QuestionnaireChoice value="timeline">Timeline</QuestionnaireChoice>
        </QuestionnaireChoices>
      </QuestionnaireItem>
      <QuestionnaireActions>
        <QuestionnairePrevious />
        <QuestionnaireNext />
        <QuestionnaireSubmit />
      </QuestionnaireActions>
    </Questionnaire>
  )
}
```

## API

### Questionnaire

Root from `@shadcn/react/questionnaire`.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `items` | QuestionnaireItemConfig[] | — |  |
| `shortcuts` | "letters" \| boolean | — |  |

### QuestionnaireItem

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `name` | string | — |  |
| `required` | boolean | — |  |
| `multiple` | boolean | — |  |

## Notes

- Also exports `QuestionnaireDescription`, `QuestionnaireError`, `QuestionnaireInput`, `QuestionnaireSkip`, and `QuestionnaireChoiceDescription`.

## See also

- [HTML page](https://ui.anuragroy.dev/component/questionnaire): Preview and the same docs in the site chrome.
- [Registry item](https://ui.anuragroy.dev/r/questionnaire.json): Source files and dependencies.
- [Catalog](https://ui.anuragroy.dev/component): All components.
- [llms.txt](https://ui.anuragroy.dev/llms.txt): Agent index for this library.