# Wizard

**When to use:** Animated step container for multi-step forms and flows. Handles slide transitions between steps. Pair with `Stepper` for a progress indicator.

**Keywords:** step flow

**Import:** `import { Wizard } from '@ahrowe/ui'`

```tsx
import { Wizard, Stepper, ActionButtons } from '@ahrowe/ui';

const STEPS = ['Account', 'Profile', 'Confirm'];
const [step, setStep] = useState(0);

<Stepper steps={STEPS.map(label => ({ label }))} currentStep={step} />

<Wizard
  currentStep={step}
  stepCount={STEPS.length}
  renderStep={(stepIndex) => {
    if (stepIndex === 0) return <AccountForm />;
    if (stepIndex === 1) return <ProfileForm />;
    if (stepIndex === 2) return <ConfirmStep />;
    return null;
  }}
/>

<ActionButtons
  labels={{ submit: step < STEPS.length - 1 ? 'Next' : 'Finish', cancel: step > 0 ? 'Back' : 'Cancel' }}
  onSubmit={() => step < STEPS.length - 1 ? setStep(step + 1) : handleFinish()}
  onClose={() => step > 0 ? setStep(step - 1) : handleCancel()}
/>
```

**How it behaves:**

- Every step stays mounted, so what was typed into a step survives going back to it. A step out of view is `inert` and hidden.
- Its height follows the active step's, and animates with the slide; under reduced motion both are instant.
- It clips sideways only, to hide the steps waiting beside it, so a floated label or a focus ring at a step's top or bottom edge still shows.
- It does not move focus. After a step change the focus stays on the button that caused it.

**Checking one step before the next:** keep the whole form in one `useFormValidatorGroup`, and on
Next mark only that step's fields `touched`, which shows their errors (FormValidator.md), then move
on if none has one. `submit()` on the last step checks everything.

```tsx
const stepFields = [[form.group.name, form.group.email], [form.group.plan]];

function next() {
  const fields = stepFields[step];
  fields.forEach((field) => {
    field.touched = true;
  });
  if (!fields.some((field) => field.hasError())) setStep(step + 1);
}
```

**Key props:**

| Prop | Type | Description |
|------|------|-------------|
| `currentStep` | `number` | Zero-based active step |
| `stepCount` | `number` | Total number of steps |
| `renderStep` | `(stepIndex: number) => ReactNode` | Render function called per step |
| `className` | `string` | Wrapper class |

**Slots:** `root` `container` `step` `stepContent`