Wizard

A multi-step workflow with step navigation, progress indicator, and content panels.

Preview · Wizard

Code

HTML · @primus/ui-core
React
Angular

<div class="vstack" style="max-width:440px;width:100%">
  <div style="display:flex;gap:0;border:1px solid var(--border);border-radius:var(--radius-medium);overflow:hidden">
    <div style="flex:1;padding:0.5rem;text-align:center;font-size:0.8rem;background:var(--primary);color:var(--primary-foreground);font-weight:600">1 · Details</div>
    <div style="flex:1;padding:0.5rem;text-align:center;font-size:0.8rem;background:var(--muted);color:var(--muted-foreground)">2 · Review</div>
    <div style="flex:1;padding:0.5rem;text-align:center;font-size:0.8rem;background:var(--muted);color:var(--muted-foreground)">3 · Confirm</div>
  </div>
  <div class="card" style="padding:1.25rem">
    <div class="vstack">
      <label>Tenant name <input type="text" placeholder="Acme Corp" /></label>
      <label>Plan <select><option>Pro</option><option>Enterprise</option></select></label>
    </div>
    <div style="display:flex;justify-content:flex-end;gap:0.5rem;margin-top:1rem">
      <button data-variant="secondary" class="small">Back</button>
      <button class="small">Next →</button>
    </div>
  </div>
</div>

import { PrimusWizard, PrimusWizardStep } from 'primus-react-ui';

<PrimusWizard title="Create Tenant" activeStep={step} onStepChange={setStep}>
  <PrimusWizardStep label="Details">
    <PrimusInput label="Tenant name" />
    <PrimusSelect label="Plan" options={planOptions} />
  </PrimusWizardStep>
  <PrimusWizardStep label="Review">
    {/* review content */}
  </PrimusWizardStep>
  <PrimusWizardStep label="Confirm">
    {/* confirm content */}
  </PrimusWizardStep>
</PrimusWizard>

<primus-wizard title="Create Tenant" subtitle="Step 1 of 3">
  <div wizard-steps>
    <primus-stepper [steps]="steps" [activeStep]="activeStep"
      [completedSteps]="completedSteps">
    </primus-stepper>
  </div>
  <div wizard-content><!-- step content --></div>
  <div wizard-actions>
    <primus-wizard-nav (back)="onBack()" (next)="onNext()"></primus-wizard-nav>
  </div>
</primus-wizard>

Props

Prop	Type	Default	Description
`title`	`string`	—	Wizard title
`activeStep`	`number`	`0`	Current step index

Version history

See the Changelog for version history and breaking changes.

Code​

Props​

Code

Props