Questionnaire: Auto-advance example for React & shadcn/ui

"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>
  )
}

Add this example

This adds the example as components/examples/questionnaire/auto-advance.tsx, together with the Questionnaire component and the HextaUI theme tokens it needs.

pnpm dlx shadcn@latest add https://hextaui.com/r/questionnaire-auto-advance.json

To add only the component, follow the Questionnaire installation.

Props in this example

The Questionnaire props this example sets, from the API reference.

Questionnaire

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

QuestionnaireItem

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

QuestionnaireChoice

Prop	Type	Default
`value`	`string`	`–`

Every prop is in the Questionnaire API reference.