## Installation [#installation] npm pnpm yarn bun ```bash npx shadcn@latest add @dotui/questionnaire ``` ```bash pnpm dlx shadcn@latest add @dotui/questionnaire ``` ```bash yarn dlx shadcn@latest add @dotui/questionnaire ``` ```bash bun x shadcn@latest add @dotui/questionnaire ``` ## Usage [#usage] ```tsx import { Questionnaire, QuestionnaireActions, QuestionnaireChoice, QuestionnaireChoices, QuestionnaireItem, QuestionnaireNext, QuestionnairePrevious, QuestionnaireSubmit, QuestionnaireTitle, } from "@/ui/questionnaire" ``` ```tsx What best describes your role? Designer Engineer ``` ## Anatomy [#anatomy] `Questionnaire` renders a form and shows one `QuestionnaireItem` at a time. An item is single-answer by default and multi-answer with `multiple`; its choices render as radios or checkboxes accordingly, with optional letter or number `shortcuts`. Free-text questions use `QuestionnaireInput`, and `QuestionnaireError` shows the active question's validation message. The navigation renders itself: `QuestionnairePrevious` hides on the first question, `QuestionnaireSkip` only appears on optional questions, `QuestionnaireNext` advances, and `QuestionnaireSubmit` takes its place on the last question. `QuestionnaireProgress` reads "1 of 4"-style progress. ## Examples [#examples] ## API Reference [#api-reference] ### Questionnaire [#questionnaire] ### QuestionnaireProgress [#questionnaireprogress] ### QuestionnaireItem [#questionnaireitem] ### QuestionnaireTitle [#questionnairetitle] ### QuestionnaireDescription [#questionnairedescription] ### QuestionnaireChoices [#questionnairechoices] ### QuestionnaireChoice [#questionnairechoice] ### QuestionnaireChoiceDescription [#questionnairechoicedescription] ### QuestionnaireInput [#questionnaireinput] ### QuestionnaireError [#questionnaireerror] ### QuestionnaireActions [#questionnaireactions] ### QuestionnairePrevious [#questionnaireprevious] ### QuestionnaireSkip [#questionnaireskip] ### QuestionnaireNext [#questionnairenext] ### QuestionnaireSubmit [#questionnairesubmit]