Questionnaire

UsageCopy Anchor Link

import {
  Questionnaire,
  QuestionnaireActions,
  QuestionnaireChoice,
  QuestionnaireChoices,
  QuestionnaireItem,
  QuestionnaireNext,
  QuestionnairePrevious,
  QuestionnaireProgress,
  QuestionnaireSubmit,
  QuestionnaireTitle,
} from "uilab-core"

<Questionnaire onSubmit={onSubmit}>
  <QuestionnaireProgress />
  <QuestionnaireItem name="role" required>
    <QuestionnaireTitle>What best describes your role?</QuestionnaireTitle>
    <QuestionnaireChoices>
      <QuestionnaireChoice value="developer">Developer</QuestionnaireChoice>
      <QuestionnaireChoice value="designer">Designer</QuestionnaireChoice>
    </QuestionnaireChoices>
  </QuestionnaireItem>
  <QuestionnaireActions>
    <QuestionnairePrevious />
    <QuestionnaireNext />
    <QuestionnaireSubmit />
  </QuestionnaireActions>
</Questionnaire>

Questionnaire renders a <form>, and each QuestionnaireItem is one question. Only the current question is shown. Answers are submitted as regular form fields named after each item's name, so read them with FormData in onSubmit.

AnswersCopy Anchor Link

Add QuestionnaireChoiceDescription inside a choice for a second line of text.

Required questionsCopy Anchor Link

Add required to a QuestionnaireItem to stop users moving on without an answer. QuestionnaireError shows its message when they try.

Keyboard shortcutsCopy Anchor Link

Set shortcuts="letters" or shortcuts="numbers" on Questionnaire to pick choices with A/B/C or 1/2/3. Each choice shows its key, and Enter moves to the next question.

NavigationCopy Anchor Link

Each button accepts variant and size like Button. Pass children to change the label.

Use item, defaultItem and onItemChange on Questionnaire to control which question is shown.