build69
Sign inGet API key
build69  /  Components  /  Forms & Flows  /  Wizard

Wizard

v1.0.9Updated 27 Aug 2026

Multi-step form shell composing the Stepper: clickable step header, WizardStep content panels, and a Back/Next/Finish footer. Next/Finish run the current step's validate() (sync or async) — a string result renders as an

View source← Back to catalog

Preview

Live · 7 stories
DefaultOpen ↗
▸Why this is recommendedwizardmulti-stepformstepper+4

The default, out-of-the-box Wizard.

Recommended for+14
  • ✓Workspace/company onboarding flows
  • ✓Multi-step settings or setup (tax profile, bank account)
  • ✓Checkout-style confirm flows with a review step
  • ✓Any form too long for one page
Tags+6
wizardmulti-stepformstepperonboardingvalidationcheckoutdefault
Features+4
  • Composes Stepper header (completed steps clickable, roving-tabindex arrows)
  • Per-step sync/async validate — string result shows inline role="alert" error
  • Step state (active / done / error) reflected into the Stepper header
  • Controlled and uncontrolled activeStep
  • Linear vs free navigation modes
  • Configurable Back / Next / Finish labels (i18n-ready)
  • Async onFinish with loading button state
  • Focus moves to the step heading on change, announced via aria-live
  • WizardSummary / WizardSummaryItem review pane with jump-back Edit buttons
  • useWizard hook for custom step content
  • Sizes sm / md; prefers-reduced-motion respected
Not recommended for−2
  • ✕Progress display without navigation (use Stepper alone)
  • ✕Simple two-field forms (use FormSection)
  • ✕Page-level route-driven flows (own the state and use controlled mode)

Install

Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.

get_registry_item({ name: "Wizard" })

Usage

import { Wizard, WizardStep, WizardSummary, WizardSummaryItem } from '@build69/ui';

<Wizard steps={steps} onFinish={submit} labels={{ finish: 'บันทึก' }}>
  <WizardStep stepId="company">…fields…</WizardStep>
  <WizardStep stepId="review">
    <WizardSummary title="Workspace summary">
      <WizardSummaryItem label="Company" value={name} stepId="company" />
    </WizardSummary>
  </WizardStep>
</Wizard>

Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.

Props

PropTypeRequired
steps

Ordered step defs: { id, title, description?, icon?, optional?, validate? }

WizardStepDef[]yes
activeStep

Controlled active step index

number—
defaultActiveStep

Uncontrolled initial step index (default 0)

number—
onActiveStepChange

Fires on any navigation

(index: number) => void—
onFinish

Called after the last step validates; async shows loading

() => void | Promise<void>—
mode

linear: header only jumps back to visited steps; free: any step clickable

'linear' | 'free'—
labels

Footer button labels

{ back?; next?; finish? }—
size

Density of heading, spacing and footer buttons

'sm' | 'md'—
alternativeLabel

Stepper labels centered under the circles

boolean—

Related

Platform docsAll componentsSource files