Asks one question at a time in a soft tray, with single or multiple answers, shortcuts, validation, restore, and conditional steps.
Preview
npx shadcn add @fetaui/questionnaireWhat kind of change is this?
Choose the category that best describes the work.
What context should the agent inspect?
Select every source that may affect the implementation.
How should the agent approach this refactor?
Choose a strategy or write a more specific instruction.
What kind of change is this?
Choose the category that best describes the work.
What should the agent do next?
Use the displayed shortcut or navigate with the keyboard.
How much detail should the answer include?
Choose the response depth.
How should the migration be verified?
These checks were selected during the previous session.
Where should the agent run?
Cloud runs add an environment question to this flow.
What may the agent modify?
Next stays disabled until an answer is selected.
How large is the change?
What should the agent do?
Choose the task for this run.
Agent task
1 / 3What should the agent work on?
Choose the task that should be handled next.
What kind of change is this?
Choose the category that best describes the work.
Installation
npx shadcn add @fetaui/questionnaire
Accessibility
- Choices are native radios or checkboxes in a group labelled by the question.
- Focus moves to the new question title after Next.
- Errors are announced and linked with aria-describedby.
- Conditional choices disable rather than disappear, so the order stays stable.
Motion
- The tray and actions stay still while the body trades questions: old up 12, new from below 12, 280 ms spring.
- Back reverses over 240 ms.
- Selecting lifts the choice with an ink ring over 160 ms. A shortcut presses its key for 80 ms.
- The step pill stretches over 220 ms. The error note opens over 200 ms with no shake.
- With reduced motion, questions cross fade and the ring is instant.
Responsive behavior
- 358 wide with roomier choices and no shortcuts.
- Titles grow to 17.
Performance
- Only the current question is mounted.
- Step pills stretch with transforms, so nothing reflows.
- The list of live questions is memoized, and when runs again only when answers change.
Note for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Import Questionnaire, QuestionnaireChoice and QuestionnaireDialog from @/components/fetaui/questionnaire. It composes Radio, Checkbox, Input, Button and Icon Button.
- onComplete receives answers keyed by question id, each with values and an optional text.
- Shortcuts and Enter work only when shortcuts is set. Next works on any optional question. Skip for now shows only on the first question, or with foldAnswers, and only when no shortcuts are set.
- Pass step with onStepChange to hold the checkpoint in the host. onCancel adds Close and Cancel. The demo's answers go nowhere.