# Wizard

> Multi-step flow on top of `Stepper`: the current step's content, then Back / Next / Finish.

Source: https://ui.jcsoftdev.com/docs/components/wizard

Multi-step flow on top of `Stepper`: the current step's content, then Back / Next / Finish.
Moving forward runs the step's `canAdvance` and `onBeforeNext`; the step heading takes focus
on every change so keyboard and screen-reader users land on the new step. Enter inside a
single-line input advances. Under 420px of its own width the step title becomes visible and
the buttons stack.

## Import

```ts
import { Wizard } from "@jcsoftdev/ui/navigation";
```

Single-component entry points tree-shake to just this component: `@jcsoftdev/ui/navigation/wizard`.

## Usage

```tsx
<Wizard steps={steps} />
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `steps` * | `readonly WizardStep[]` |  |  |
| `value` | `string` |  | Controlled current step id. |
| `defaultValue` | `string` |  | Initial step id when uncontrolled (defaults to the first step). |
| `onValueChange` | `((stepId: string) => void)` |  |  |
| `onBeforeNext` | `((step: WizardStep, index: number) => boolean \| Promise<boolean>)` |  | Runs before moving forward from a step, after that step's `canAdvance`. Return `false` (or a promise of `false`) to stay. While it is pending the buttons show a busy state and a second press is ignored. |
| `onComplete` | `(() => void \| Promise<void>)` |  | Called by the last step's finish button; may return a promise (pending state, no double run). |
| `backLabel` | `string` |  | Overrides the localized labels. |
| `nextLabel` | `string` |  |  |
| `finishLabel` | `string` |  |  |
| `buttonSize` | `"sm" \| "md" \| "lg"` | `"md"` | Size of the Back and Next/Finish buttons. Default `md` (38px, the height of a default field). |
| `classNames` | `Partial<Record<WizardPart, string>>` |  | Per-part classes merged with `cn`; consumer classes win. `className` still targets the root. |

`*` marks a required prop.

It also accepts the native props of the element or primitive it renders (for example `className`, `id`, `aria-*` and event handlers).

## Storybook stories

- [Default](/storybook/?path=/story/navigation-wizard--default)
- [Finish Calls On Complete](/storybook/?path=/story/navigation-wizard--finish-calls-on-complete)
- [Blocked By Validation](/storybook/?path=/story/navigation-wizard--blocked-by-validation)
- [Throwing Validation Shows An Error](/storybook/?path=/story/navigation-wizard--throwing-validation-shows-an-error)
- [Async Validation Is Pending And Runs Once](/storybook/?path=/story/navigation-wizard--async-validation-is-pending-and-runs-once)
- [Step Can Advance False Disables Next](/storybook/?path=/story/navigation-wizard--step-can-advance-false-disables-next)
- [Step Can Advance Function](/storybook/?path=/story/navigation-wizard--step-can-advance-function)
- [Enter In An Input Advances](/storybook/?path=/story/navigation-wizard--enter-in-an-input-advances)
- [Controlled](/storybook/?path=/story/navigation-wizard--controlled)
- [Spanish](/storybook/?path=/story/navigation-wizard--spanish)
- [Compact In Narrow Container](/storybook/?path=/story/navigation-wizard--compact-in-narrow-container)

## Source

`packages/ui/src/navigation/wizard/wizard.tsx`