Wizard

Interactive

See Wizard in Storybook for every variant, with live controls.

A stepped flow — connect, map, schedule.

import { Wizard } from "@kairosis/eidos";

<Wizard
  steps={[
    { id: "source", label: "Connect", description: "Pick a source" },
    { id: "map", label: "Map", description: "Match fields" },
    { id: "schedule", label: "Schedule" },
  ]}
  current={current}
  onStepClick={setCurrent}
>
  {stepBody}
</Wizard>;

Props

Prop	Type	Default	Description
steps	WizardStep[]	—	Required
current	number	0	0-based index
onStepClick	(index: number) => void	—	Enables navigation back to completed steps
children	ReactNode	—	The current step's body

WizardStep is { id, label, description? }.

Guidelines

• Only completed steps are clickable — you can't skip ahead, even with onStepClick set. Forward movement is yours to drive (a Continue button), because only you know if the step is valid.
• Without onStepClick, the markers are purely indicative.
• The current step sets aria-current="step".
• Markers are mono numbers, and become a check once complete.