Pattern

Wizard / stepper

A task split into ordered steps, with progress shown above and Back / Next below.

.b-wrapper[data-max="sm"].b-region.b-flow.b-cluster.b-repel

Use only when later steps depend on earlier ones (commissioning, onboarding). Avoid splitting an ordinary form into steps — it hides the total effort. Always allow going back without losing input.

Preview

Acuity Brands Lighting

Each kit renders in its own frame and follows the theme and density set in the header. Open full-size ↗

HTML

Layout uses Beam compositions and utilities only. Buttons, inputs, toggles, badges and tables here are stand-ins so the preview renders — in product, use the Cantina components below.

<div class="[ b-wrapper b-region b-flow ]" data-max="sm" data-space="lg">
  <h1>Commission a floor</h1>
  <ol class="[ b-cluster ] [ b-stepper ]" data-gap="md" role="list">
    <li data-state="done">Choose floor</li>
    <li aria-current="step">Discover devices</li>
    <li>Assign zones</li>
    <li>Review</li>
  </ol>
  <section class="[ b-flow ] [ b-card ]" data-space="md">
    <h2 class="[ u-type-h4 ]">Discover devices</h2>
    <p class="[ u-text-neutral-secondary ]">Make sure the gateway is powered on, then scan.</p>
    <label class="[ b-field ]"><span class="[ u-type-label ]">Gateway</span><select class="[ b-input ]"><option>Gateway 07 · Floor 1</option></select></label>
    <div><button class="[ b-button ]" data-variant="outline" type="button">Scan now</button></div>
  </section>
  <div class="[ b-repel ]">
    <button class="[ b-button ]" data-variant="outline" type="button">Back</button>
    <button class="[ b-button ]" data-variant="solid" type="button">Next</button>
  </div>
</div>

Cantina components

multi-step-progress-bar
labeled-input
button

Open Cantina ↗

Recipe

The rules an agent follows to build this pattern. This is what goes into beam.skill.

Only for tasks with 3–6 dependent steps; otherwise use a single form.
Width: .b-wrapper[data-max="sm"]. Progress (Cantina <MultiStepProgressBar>) above the step content; mark the current step with aria-current="step".
Each step is a card with its own heading and fields (see Form layout).
Footer: .b-repel — Back (outline) left, Next / Finish (solid) right. Validate before moving on; keep entered values when going back.

beam.skill recipe (Markdown)

## Pattern: Wizard / stepper
A task split into ordered steps, with progress shown above and Back / Next below.

Compositions: .b-wrapper[data-max="sm"], .b-region, .b-flow, .b-cluster, .b-repel
Cantina: multi-step-progress-bar, labeled-input, button

1. Only for tasks with 3–6 dependent steps; otherwise use a single form.
2. Width: .b-wrapper[data-max="sm"]. Progress (Cantina <MultiStepProgressBar>) above the step content; mark the current step with aria-current="step".
3. Each step is a card with its own heading and fields (see Form layout).
4. Footer: .b-repel — Back (outline) left, Next / Finish (solid) right. Validate before moving on; keep entered values when going back.