Skip to main content

🧭 Multi-Step Flow Example

This example shows how to model a step-by-step flow, such as a wizard form or onboarding guide, using a finite state machine.

Each step is represented by a status, and you can move between them using next, prev, and reset actions.

Current Step: step1

Step 1: Personal Info

🔧 Machine Definition​

import { createRetomus, createMachineConfig } from 'retomus';

const retomus = createRetomus();

const steps = ['step1', 'step2', 'step3'];

const multiStepMachine = retomus.createMachine(
  createMachineConfig({
    id: 'multiStep',
    status: [...steps],
    actions: ['next', 'prev', 'reset'],
    transitions: {
      step1: { next: 'step2' },
      step2: { next: 'step3', prev: 'step1' },
      step3: { prev: 'step2', reset: 'step1' },
    },
    actionHandlers: {
      next: ({ done }) => done(),
      prev: ({ done }) => done(),
      reset: ({ done }) => done(),
    },
    initialStatus: { status: 'step1' },
    ctx: {
      state: {},
    },
  }),
);

🧩 React Component​

import React, { CSSProperties } from 'react';

const MultiStepComponent = ({ multiStepMachine }) => {
  const step = multiStepMachine.useStatus();
  const next = multiStepMachine.useAction('next');
  const prev = multiStepMachine.useAction('prev');
  const reset = multiStepMachine.useAction('reset');

  const stepContent = {
    step1: <p>Step 1: Personal Info</p>,
    step2: <p>Step 2: Contact Details</p>,
    step3: <p>Step 3: Confirmation</p>,
  };

  return (
    <div style={styles.container}>
      <h2>Current Step: {step}</h2>
      {stepContent[step]}

      <div style={styles.buttonGroup}>
        {step !== 'step1' && <button onClick={() => prev()}>Back</button>}
        {step !== 'step3' && <button onClick={() => next()}>Next</button>}
        {step === 'step3' && <button onClick={() => reset()}>Reset</button>}
      </div>
    </div>
  );
};

const styles: {
  container: CSSProperties;
  buttonGroup: CSSProperties;
} = {
  container: {
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center',
    gap: '1rem',
  },
  buttonGroup: {
    display: 'flex',
    justifyContent: 'flex-end',
    gap: '1rem', // space-x-4
  },
};

✅ What You Learn​

  • Modeling multiple steps as finite states
  • Strict navigation (no out-of-bounds jump)
  • Clear transition logic between steps

🔗 Related​