Components

Wizard

A multi-step flow built on the stepper. A .ds-stepper trail heads the card, the active step's content fills the .ds-wizard__panel, and a footer set off by a top rule carries Back on the left with Next / Finish on the right.

Interactive

Use Back / Next to move through the steps — earlier markers flip to is-complete, the current one to is-active, and Next becomes Finish on the last step.

Live
  1. 1Profile
  2. 2Rates
  3. 3Review
Step 1 — capture the consultant profile: name, grade and home entity.
<div class="ds-wizard">
  <div class="ds-wizard__steps">
    <ol class="ds-stepper">
      <li class="ds-stepper__step is-active" aria-current="step"><span class="ds-stepper__marker">1</span><span class="ds-stepper__label">Profile</span></li>
      <li class="ds-stepper__step"><span class="ds-stepper__marker">2</span><span class="ds-stepper__label">Rates</span></li>
      <li class="ds-stepper__step"><span class="ds-stepper__marker">3</span><span class="ds-stepper__label">Review</span></li>
    </ol>
  </div>
  <div class="ds-wizard__panel">Step 1 — capture the consultant profile…</div>
  <div class="ds-wizard__footer">
    <button class="ds-button" type="button" disabled>Back</button>
    <div class="ds-wizard__footer-actions">
      <button class="ds-button ds-button--primary" type="button">Next</button>
    </div>
  </div>
</div>

Last step · Finish

On the final step every prior marker is is-complete and the trailing action reads Finish.

Final step
  1. 1Profile
  2. 2Rates
  3. 3Review
Everything checks out — finish to publish the grid.
<div class="ds-wizard__footer">
  <button class="ds-button" type="button">Back</button>
  <div class="ds-wizard__footer-actions">
    <button class="ds-button ds-button--primary" type="button">Finish</button>
  </div>
</div>

React

Pass steps ({ label, content }); the component renders the stepper, the active panel and the footer. It works controlled (active/onStepChange) or uncontrolled (defaultActive); set disableNext on a step to gate Next, and pass onFinish for the last step.

<Wizard /> 
import { Wizard } from "@diametral/design-system/react";

<Wizard
  defaultActive={0}
  onFinish={() => publish()}
  steps={[
    { label: "Profile", content: <ProfileForm /> },
    { label: "Rates",   content: <RatesForm />, disableNext: !ratesValid },
    { label: "Review",  content: <ReviewPanel /> },
  ]}
/>