Wizard

Wizard manages a multi-step flow end to end: it renders a Stepper for progress, the current step's content, and Back/Next/Finish buttons, advancing through steps as the user completes each one. Use it for setup flows, checkouts, or any task too long for a single form.

Each step's onNext can run validation and return false (or a Promise resolving to false) to block advancing — the Next button shows a busy state while it resolves. A step's content can be a render function that receives a WizardStepApi (next, back, goTo, isFirst, isLast...) so the step itself can trigger navigation, e.g. from a "Skip" link.

Example

import { Wizard } from '@officina/ui';

<Wizard
  onComplete={() => console.log('done')}
  steps={[
    {
      id: 'account',
      label: 'Account',
      content: <p>Create workspace.</p>,
      onNext: () => true, // return false to block advancing
    },
    {
      id: 'theme',
      label: 'Theme',
      content: <p>Pick tokens.</p>,
    },
  ]}
/>;

API