Shadcn Questionnaire

Q: Can a question accept several answers at once?

Yes. Add `multiple` to QuestionnaireItem. The choice markup does not change: the engine swaps the hidden radios for checkboxes and the indicator switches from a dot to a check mark on its own.

Q: Can I show a question only when an earlier answer calls for it?

Yes. Mark the item `disabled` while it does not apply and it leaves the flow and the progress count, then rejoins when it does. Keep the conditional question after the one that controls it: disabling the question currently on screen sends the visitor back to the first enabled question.

Browse 7 production-ready shadcn questionnaire components for onboarding surveys, intake forms, feedback flows, and guided setup. Questionnaire renders a real form and shows one question at a time, ships for both the Base UI and Radix UI variants, and follows Shadcn Create style options so previews match your design tokens.

For AI Agents

Hand your agent this brief or the ReUI MCP, not a screenshot. Free to install.

When to use

Onboarding and setup flows that ask one single or multiple answer question per screen
Short intake surveys, such as how a visitor heard about you or what they are moving off
Question flows with an optional step, a branch that joins on an earlier answer or a rule across answers

When not to use

Steps that each hold a whole screen of mixed fields rather than one question: use the Stepper component
A bar that reports how far an upload, a goal or a task has got, with no questions: use the Progress component
A complete first-run screen that also collects a profile, a timezone and teammate invites: use the Onboarding blocks

Agent notes

A QuestionnaireItem whose name is missing from the root items list is left out of the flow and the count, with only a dev warning
handleSubmit reads the answers with FormData and only renders a local confirmation; send them to your API from there
QuestionnaireActions is a 3 column grid placed for Previous, Skip and Next or Submit, so keep any other button outside it

Markdownhttps://web.dev.reui.io/components/questionnaire.md

MCPget_component("questionnaire")

Installnpx shadcn@latest add questionnaire

Full index for agents:llms.txtReUI MCP setup

Shadcn Questionnaire: One Question at a Time, in a Real Form

Shadcn Questionnaire is a multi-step question flow built on the headless questionnaire engine in @shadcn/react. The root is a real form element, each question is a fieldset, and every answer is a native radio, checkbox, or text input, so submitted answers arrive as ordinary FormData with no extra state library.

Only the active question is on screen: the others carry hidden and inert, which keeps them out of the tab order and out of the accessibility tree. Progress, navigation buttons, skip, and the error message all read from the same engine, so a flow stays consistent when you add or reorder questions.

ReUI lists questionnaire components inside cards, branching flows, and custom progress treatments so you can judge step height, choice density, and how the flow pairs with Shadcn Card, Shadcn Button, and Shadcn Label. The sections below cover what the component is, why teams use it, its features, and how it fits the rest of your form stack.

What is Shadcn Questionnaire?

A questionnaire is a sequence of questions answered one screen at a time, with progress, back and next navigation, and a submit at the end. Shadcn Questionnaire supplies that sequence: Questionnaire is the form, QuestionnaireItem is a question, QuestionnaireChoices holds the answers, and QuestionnaireProgress, QuestionnairePrevious, QuestionnaireSkip, QuestionnaireNext, and QuestionnaireSubmit are the chrome around them. Navigation buttons hide themselves when they do not apply, so Previous is absent on the first question and Submit appears only on the last.

Components here show a guided setup in a card, a multi-answer question, a typed answer sitting beside fixed choices, a segmented progress bar, an optional question with skip, a cross-question rule that sends the visitor back, and a branch that only joins the flow after a matching answer. They are meant to answer whether your product needs a short intake, a long onboarding survey, or a wizard with rules, before you commit to a shape.

Why Use Shadcn Questionnaire?

Hand-rolled question flows usually break in the same places: the back button loses an answer, an optional question cannot be told apart from an unanswered one, and the progress count drifts once a step becomes conditional. This component keeps that bookkeeping in one place. Each question reports a status of unanswered, answered, or skipped, submit fires only once every enabled question is satisfied, and a question marked disabled drops out of both the flow and the progress count.

When the flow is the whole page rather than one component, ReUI Pro picks it up: the 9 Onboarding blocks are the same one-question-per-step idea finished, with 6-step and 8-step wizards, stepper sidebars, avatar upload, timezone pickers, invite steps, and a success screen. The 12 AI Chat blocks include 2 that already compose this component inside a conversation, so the free examples and the paid blocks run on the same API.

Shadcn Questionnaire Features

Native Form Submission. The root is a form and every answer is a real input, so you read results with FormData in onSubmit. Native validation is off by default, and you can pass noValidate={false} to switch it back on.
Single or Multi-Answer Questions. Choices render as radios by default. Add multiple to a question and the same markup renders checkboxes, with every selected value carried in the submitted data.
Skip and Status Tracking. Skip renders only while the active question is not required, and onStatusChange reports unanswered, answered, or skipped, so a declined question is never confused with one that was never reached.
Progress You Can Redraw. QuestionnaireProgress prints the current position, for example "Question 2 of 5", and ships role="progressbar" with aria-valuenow. Its render prop hands you current, first, last, and total, so a segmented bar or a named step keeps the same accessible semantics.
Typed Answers Beside Fixed Choices. QuestionnaireInput adds an "other, please specify" field to a question. The engine attaches the name to whichever control holds the answer, so typing clears the selected choice and only one value per question is submitted. Pair it with Shadcn Label for an accessible name.
Keyboard and Shortcuts. Arrow keys move between answers and between questions, Cmd or Ctrl plus Enter advances or submits, and shortcuts set to letters or numbers puts a single-key badge on each choice. Shortcuts are suppressed while focus is in a text field.
Shadcn Create Compatible. All 8 Shadcn Create themes (Vega, Nova, Maia, Lyra, Mira, Luma, Sera, and Rhea) style the choice rows, indicators, inputs, and error text, so radius, color scale, and font family carry into previews and exported code.

Wiring Questionnaire Into Your Form Stack

Because the root is a form, the parts you already use still apply. Wrap a question in Shadcn Card and pass the card title through the QuestionnaireTitle render prop so the legend keeps its semantics. Put Shadcn Label above a typed answer, and end the flow with Shadcn Empty or a summary card rather than a toast, which is easy to miss on a long form.

For rules that no single question can decide, keep the flow controlled: pass item and onItemChange, run the check in onSubmit, then mark the offending question invalid, supply your own QuestionnaireError copy, and move the flow back to it. For a question that only applies sometimes, toggle disabled on an item that sits after the answer controlling it, and it rejoins the flow and the progress count when it becomes relevant.

Wrap the flow in Shadcn Card with progress in the header and Shadcn Button actions in the footer, which is the shape most onboarding surfaces take. Use Shadcn Label with a typed answer, Shadcn Avatar inside a choice when the question is about people, and Shadcn Badge beside the progress line for a live count or an optional-question state.

Questionnaire covers questions with fixed answers. When a step needs a date, a file, or a long free-text reply, switch to Shadcn Field with Shadcn Input, Shadcn Textarea, or Shadcn File Upload, and finish the flow with Shadcn Empty as a success state. Shadcn Stepper is the better fit when a single step holds several inputs at once.

For the full screen rather than the component, ReUI Pro has the assembled versions: 9 Onboarding blocks with multi-step setup, invites, and success states, 7 Wizard blocks for transactional flows such as billing and procurement, and 12 Form blocks for the screens a questionnaire hands off to. They are built on the same primitives, so what you learn here carries straight over.

Onboarding Blocks in ReUI Pro

The free examples above pair with 9 production ready onboarding blocks in ReUI Pro, complete sections built on the same primitives and ready to copy into your app.

Onboarding (9 blocks)User onboarding flows with step indicators, welcome screens, and guided setup wizards.

Browse all Application blocks

Frequently Asked Questions

What is a Shadcn Questionnaire used for in real products?

First-run onboarding, account setup, migration intake, NPS and feedback prompts, lead qualification, and support triage. Anywhere a long form would be abandoned, asking one question per screen with visible progress keeps completion rates higher and keeps each answer in context.

How is this different from a Radio Group inside a Stepper?

Shadcn Radio Group is one control and Shadcn Stepper is a progress indicator, so you still own the flow: which question is active, when Next is allowed, what a skip means, and how answers are collected. Questionnaire owns that layer and leaves the presentation to you. Use Stepper when the steps are whole screens of mixed inputs, and Questionnaire when each step is a single question.

How do I read the answers when the flow is submitted?

In onSubmit, call new FormData(event.currentTarget). Each question submits under its name, so get returns a single-choice answer and getAll returns every checked value on a question marked multiple. Submit only fires once every enabled question is answered or skipped, so you are not handling half-filled data.

Can a question accept several answers at once?

Yes. Add multiple to QuestionnaireItem. The choice markup does not change: the engine swaps the hidden radios for checkboxes and the indicator switches from a dot to a check mark on its own.

What happens when a question is optional?

Leave required off and a Skip button appears while that question is active. Skipping records a status of skipped rather than an empty answer, which is the distinction that matters when you report on the results later. An optional question that is neither answered nor skipped still blocks Next, so nobody falls through a question by accident.

Can I show a question only when an earlier answer calls for it?

Yes. Mark the item disabled while it does not apply and it leaves the flow and the progress count, then rejoins when it does. Keep the conditional question after the one that controls it: disabling the question currently on screen sends the visitor back to the first enabled question.

Is Shadcn Questionnaire keyboard and screen-reader accessible?

Each question is a fieldset with its title as the legend and its description wired into aria-describedby, the progress region carries role="progressbar" with aria-valuenow, and the error takes role="alert" once a question is invalid. Inactive questions are hidden and inert, so they stay out of the tab order. You still own copy quality, focus-visible styles, and a test pass with real assistive technology.

Start building with ReUI Pro today.

Every Pro block, every style, and every future addition, with one license for unlimited projects.

Get All-Access

From $249, once. Lifetime updates.