v2.4Interactive Tooling

Multi-Step Recommendation Wizard

Branching-logic wizard producing a specific recommendation (not a score). An answer can determine which question comes next. The recommendation is matched from the collected answer pattern.

Read the pattern View source on GitHub

Live preview

Rendered with real component code. Each example demonstrates a documented variant.

Plan recommendation flow

Find your plan

Answer a couple of questions and we will point you to the right starting point.

Linear flow

Which template fits?

Two quick questions to find your starting point.

React props

Configure the component via props in React or via attributes in HTML.

Prop	Type	Default	Description
title	string	undefined	Heading shown on the landing screen
description	string	undefined	Supporting copy on the landing screen
questions	WizardQuestion[]	required	Ordered array of questions; branching is controlled via option-level nextQuestion
recommendations	Recommendation[]	required	Ordered list of recommendation objects; first full match wins
defaultRecommendation	Recommendation	undefined	Shown when no recommendations entry matches the collected answers
className	string	undefined	Extra class appended to the root .mrw element

HTML usage

The HTML variant uses the same shared styles and class names. Drop into any stack.

<link rel="stylesheet" href="path/to/multi-step-recommendation-wizard/styles.css">

<!-- Container populated by the IIFE script -->
<section class="mrw" id="wizard"></section>

<script>
(function () {
  var root = document.getElementById('wizard');

  var config = {
    title: 'Find your plan',
    description: 'Answer a couple of questions to find the right starting point.',
    questions: [
      {
        id: 'team-size',
        text: 'How large is your team?',
        options: [
          { value: 'solo', label: 'Just me' },
          { value: 'small', label: '2 to 10 people' },
          { value: 'large', label: '11 or more people', nextQuestion: 'enterprise-goal' },
        ],
      },
      {
        id: 'main-goal',
        text: 'What is your primary goal?',
        options: [
          { value: 'ship', label: 'Ship faster with less overhead' },
          { value: 'collaborate', label: 'Improve team collaboration' },
        ],
      },
      {
        id: 'enterprise-goal',
        text: 'Which team leads the rollout?',
        options: [
          { value: 'eng', label: 'Engineering' },
          { value: 'ops', label: 'Operations' },
        ],
      },
    ],
    recommendations: [
      {
        id: 'starter',
        title: 'Starter Plan',
        description: 'Built for solo builders who need to move quickly.',
        ctaLabel: 'Get started free',
        ctaHref: '/signup?plan=starter',
        matchAnswers: { 'team-size': 'solo' },
      },
      {
        id: 'pro',
        title: 'Pro Plan',
        description: 'Collaboration tools for growing teams.',
        ctaLabel: 'Start a Pro trial',
        ctaHref: '/signup?plan=pro',
        matchAnswers: { 'team-size': 'small' },
      },
      {
        id: 'enterprise',
        title: 'Enterprise Plan',
        description: 'Advanced controls and dedicated support.',
        ctaLabel: 'Talk to sales',
        ctaHref: '/contact/sales',
        matchAnswers: { 'team-size': 'large' },
      },
    ],
  };

  // See html/index.html for the full self-contained IIFE implementation.
  // The config object above mirrors the React props shape exactly.
}());
</script>

Customization

Override these CSS custom properties to integrate the component into your brand.

.mrw {
  --mrw-bg: var(--brand-surface, white);
  --mrw-text-color: var(--brand-ink, #102542);
  --mrw-muted-color: rgba(16, 37, 66, 0.6);
  --mrw-accent: var(--brand-accent, #1e5fcf);
  --mrw-progress-bg: rgba(0, 0, 0, 0.06);
  --mrw-progress-fill: var(--mrw-accent);
  --mrw-option-border: rgba(0, 0, 0, 0.12);
  --mrw-option-bg: white;
  --mrw-option-bg-hover: rgba(30, 95, 207, 0.04);
  --mrw-option-bg-selected: rgba(30, 95, 207, 0.08);
  --mrw-option-border-selected: var(--mrw-accent);
  --mrw-button-bg: var(--mrw-accent);
  --mrw-button-text: white;
  --mrw-button-bg-hover: color-mix(in srgb, var(--mrw-accent) 90%, black);
  --mrw-recommendation-bg: rgba(30, 95, 207, 0.05);
  --mrw-recommendation-border: rgba(30, 95, 207, 0.2);
  --mrw-radius: 1rem;
  --mrw-section-padding: 2rem;
  --mrw-gap: 1rem;
}