Wizard

Multi-step workflows for complex processes like onboarding, applications, and approvals.

WizardTemplate

import { WizardTemplate } from '@gtcx/templates';
 
<WizardTemplate
  title="New Application"
  data={{
    steps: [
      { key: 'info', title: 'Basic Info', content: <BasicInfoStep /> },
      { key: 'documents', title: 'Documents', content: <DocumentsStep /> },
      { key: 'review', title: 'Review', content: <ReviewStep /> },
      { key: 'submit', title: 'Submit', content: <SubmitStep /> },
    ],
    currentStep: 0,
  }}
  actions={[
    { key: 'next', label: 'Continue', kind: 'primary' },
    { key: 'save', label: 'Save Draft', kind: 'secondary' },
  ]}
/>

Wizard Patterns

Linear Wizard

Steps must be completed in order. Previous steps are revisitable.

Branching Wizard

Step flow depends on user choices (e.g., different paths for individual vs. corporate applicants).

Summary Step

Always include a review/summary step before final submission. Show all entered data for confirmation.

Guidelines

Show clear progress indicators (step numbers, progress bar)
Allow navigation back to previous steps
Save draft state to prevent data loss
Validate each step before allowing progression
Display a summary of all entered data before final submission
Use clear action labels: "Continue" not "Next", "Submit Application" not "Done"

Upload Overview