Step

An individual step container within a Wizard or Stepper.

Preview · Step

Code

HTML · @primus/ui-core

<div class="card" style="padding:1.25rem;max-width:380px">
  <div style="display:flex;align-items:center;gap:0.75rem;margin-bottom:0.75rem">
    <div style="width:28px;height:28px;border-radius:50%;background:var(--primary);color:var(--primary-foreground);display:flex;align-items:center;justify-content:center;font-size:0.8rem;font-weight:700;flex-shrink:0">1</div>
    <h3 style="margin:0;font-size:0.975rem">Tenant Details</h3>
  </div>
  <div class="vstack">
    <label>Name <input type="text" placeholder="Acme Corp" /></label>
    <label>Region <select><option>EU</option><option>US</option></select></label>
  </div>
</div>

React

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

<PrimusWizardStep label="Tenant Details" stepNumber={1}>
  <PrimusInput label="Name" placeholder="Acme Corp" />
  <PrimusSelect label="Region" options={regionOptions} />
</PrimusWizardStep>

Angular

<primus-step label="Tenant Details" [stepNumber]="1">
  <primus-input label="Name" placeholder="Acme Corp"></primus-input>
  <primus-select label="Region" [options]="regionOptions"></primus-select>
</primus-step>

Props

Prop	Type	Default	Description
label	string	—	Step label
stepNumber	number	—	Step number

Version history

See the Changelog for version history and breaking changes.