Skip to main content
Version: 1.0.3

Quiz Form

The QuizForm component provides a fully animated, multi-step survey and onboarding form interface. It supports single-choice, multiple-choice, and star/numeric rating questions, with a token-based variant system that makes adding new visual styles a zero-logic-change operation.

Question 1 of 425%
Single Choice

How did you first hear about us?

Installation​

ignix add component quiz-form

Basic Usage​

The most common way to use QuizForm is by passing an array of questions and an onSubmit handler.

import { QuizForm } from '@ignix-ui/quiz-form';

const questions = [
  {
    id: 'experience',
    type: 'single',
    question: 'How was your experience?',
    options: ['Excellent', 'Good', 'Average', 'Poor'],
    required: true,
  },
  {
    id: 'feedback',
    type: 'rating',
    question: 'How likely are you to recommend us?',
    scale: 10,
  }
];

export default function App() {
  return (
    <QuizForm
      questions={questions}
      onSubmit={(answers) => console.log(answers)}
    />
  );
}

Examples​

Feedback survey​

import { QuizForm } from '@ignix-ui/quiz-form';

<QuizForm
  questions={questions}
  onSubmit={(answers) => console.log(answers)}
  cardVariant="default"
  showResult={true}
/>

Onboarding flow with step labels​

<QuizForm
  questions={onboardingQuestions}
  onSubmit={handleSubmit}
  stepLabels={['Role', 'Team', 'Goals', 'Experience']}
  submitLabel="Finish Setup"
  nextLabel="Next Step"
/>

Gradient variant​

<QuizForm questions={questions} onSubmit={handleSubmit} cardVariant="gradient" />

Pre-filled answers​

<QuizForm
  questions={questions}
  onSubmit={handleSubmit}
  initialAnswers={{ q1: 'Social Media', q3: 4 }}
/>

Sub-components​

All sub-components consume QuizFormContext internally.

ComponentDescription
QuizForm.ProgressBarAnimated progress bar.
QuizForm.QuestionCardCurrent question card.
QuizForm.RadioGroupSingle-choice group.
QuizForm.CheckboxGroupMultiple-choice grid.
QuizForm.RatingScaleStar or numeric rating.
QuizForm.NavigationButtonsNav controls.
QuizForm.ResultPageResults summary.
QuizForm.AccentBarTheme accent bar.

useQuizForm hook​

Access context from any sub-component:

import { useQuizForm } from '@ignix-ui/quizform';

function MyCustomControl() {
  const { step, total } = useQuizForm();
  return <span>{step + 1} / {total}</span>;
}

Features​

  • Multi-Step Survey: Guide users through questions.
  • Animated Transitions: Smooth question sliding.
  • Question Types: Single, multiple, and rating.
  • Progress Tracking: Visual and pill-based indicators.
  • Token-Based Variants: Easy visual customization.
  • Results Summary: Built-in completion screen.
  • Responsive Design: Optimized for mobile.
  • TypeScript Support: Fully typed.

Props​

<QuizForm>​

PropTypeDefaultDescription
questionsQuestion[]—Required questions.
onSubmit(answers: QuizAnswers) => void—Submission callback.
onStepChange(step: number, total: number) => voidundefinedNavigation callback.
initialAnswersQuizAnswers{}Pre-populated data.
cardVariant'default' | 'gradient' | 'bordered' | 'dark''default'Visual style.
showResultbooleantrueShow results.
stepLabelsstring[]undefinedStep pills.
submitLabelstring'Submit'Submit label.
nextLabelstring'Continue'Next label.
backLabelstring'Back'Back label.
classNamestringundefinedWrapper class.
childrenReact.ReactNodeundefinedCustom content.
theme'light' | 'dark''light'Theme selection.

Question object​

FieldTypeRequiredDescription
idstring✓Unique key.
type'single' | 'multiple' | 'rating'✓Control type.
questionstring✓Question text.
hintstringHelper text.
optionsstring[]—Choice options.
scalenumber—Rating range.
requiredbooleanAllow skipping.