Questionnaire Component

Overview

Questionnaire shows one question at a time, sliding or fading between steps while answer choices appear in sequence. It supports single-choice, multiple-choice, and written answers, with animated selection highlights, a progress indicator, and Previous, Next, and Skip controls.

Use it when information is easier to give as a guided sequence, such as onboarding, lead qualification, assessments, and surveys. Motion should connect steps and show progress, never make the questionnaire take longer.

Theme and Interaction Customisation

Choose card or inline answers, rounded or squared indicators, bordered check icons, and primary or muted selected states. Transitions can slide horizontally or vertically, scale, fade, or be off, with adjustable highlights, stagger, duration, distance, bounce, progress display, and keyboard labels.

Example Production Use Case

A SaaS onboarding flow can ask a user’s role, then which tools they use with multiple-choice cards, then an optional written goal. The product uses the answers to tailor the first-run experience.

An agency site can qualify leads by asking project type, budget range, and timeline one step at a time, so visitors never face a long form upfront.

A skincare brand can run a short quiz that recommends a routine, with keyboard shortcuts for quick answers and a clear progress bar.

Best Used For

• Product onboarding collecting roles and goals.
• Interactive surveys with clear progress.
• Lead qualification without a long upfront form.
• Personalised product or feature recommendations.
• Assessments and quizzes.
• Customer discovery about workflows and tools.

Not For

Short forms with a name, email, and message are faster as a conventional form.

Tasks that need comparing several fields at once, like financial details or settings, work better with related inputs shown together.

When users must review or edit many answers, or the flow is time-sensitive, forced step transitions become frustrating.

Performance Budget

Use short transform and opacity transitions, render only the active question, and let users interact before staggers finish. Rapid navigation should replace outdated transitions rather than queue them.

Accessibility and Mobile

Use radio groups for single choice, checkboxes for multiple choice, and labelled inputs for text, with readable validation messages. Support full keyboard navigation without shortcuts interfering with typing, and move focus to each new question heading. On mobile, use comfortable tap targets and layouts for long labels, and with reduced motion remove slides, stagger, and spring effects.

Common Mistakes

• Making every question mandatory.
• Losing answers when users go back.
• Overanimating transitions between questions.
• Letting choice shortcuts interfere with typing.
• Showing inaccurate progress.
• Mixing up single-choice and multiple-choice behaviour.
• Submitting without validation.
• Ignoring reduced-motion preferences.