# Questionnaire: Auto-advance

> With `autoAdvance`, picking a single answer moves on after a short pause, so you can answer with `1`–`5` alone. Changing an earlier answer never jumps ahead, and the last question never submits by itself.

Example: https://hextaui.com/docs/questionnaire/examples/auto-advance
Component docs: https://hextaui.com/docs/questionnaire.md

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/questionnaire-auto-advance.json
```

This adds `components/examples/questionnaire/auto-advance.tsx` with the Questionnaire component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/questionnaire/auto-advance.tsx"
"use client"

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

const scale = ["Not at all", "Slightly", "Moderately", "Very", "Extremely"]

const items = [
  { name: "useful", prompt: "How useful was today's session?" },
  { name: "pace", prompt: "How comfortable was the pace?" },
  { name: "recommend", prompt: "How likely are you to come back?" },
]

export function QuestionnaireAutoAdvance() {
  return (
    <div className="w-full max-w-md rounded-xl border p-5">
      <Questionnaire
        autoAdvance
        shortcuts="numbers"
        onSubmit={(event) => event.preventDefault()}
      >
        <QuestionnaireProgress />
        {items.map((item) => (
          <QuestionnaireItem key={item.name} name={item.name} required>
            <QuestionnaireTitle>{item.prompt}</QuestionnaireTitle>
            <QuestionnaireChoices>
              {scale.map((label) => (
                <QuestionnaireChoice key={label} value={label}>
                  {label}
                </QuestionnaireChoice>
              ))}
            </QuestionnaireChoices>
          </QuestionnaireItem>
        ))}
        <QuestionnaireActions>
          <QuestionnairePrevious />
          <QuestionnaireNext />
          <QuestionnaireSubmit />
        </QuestionnaireActions>
      </Questionnaire>
    </div>
  )
}
```

## Props in this example

### Questionnaire

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `autoAdvance` | `boolean` | `false` | Moves on 350ms after a single answer is picked for the first time. |
| `shortcuts` | `"letters" \| "numbers"` | – | Adds a key shortcut to every answer. |

### QuestionnaireItem

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `name` | `string` | – | The form field name. |
| `required` | `boolean` | `false` |  |

### QuestionnaireChoice

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `value` | `string` | – |  |

## More Questionnaire examples

- [Lift transition and bar](https://hextaui.com/docs/questionnaire/examples/lift.md)
- [Conditional questions](https://hextaui.com/docs/questionnaire/examples/conditional.md)
- [Right to left](https://hextaui.com/docs/questionnaire/examples/rtl.md)
