1. Docs
2. Components
3. Navigation
4. Stepper

Stepper 1.2.2

Multi-step progress indicators available as the <velin-stepper> web component or the pure-CSS .velin-stepper class. Deutsch: Schrittanzeige

When to use

• Multi-step wizards, checkouts, or onboarding where the current step must be clear.
• Prefer <velin-stepper> when you need next() / prev() / goTo() and panel switching.
• Prefer the CSS pattern for static, presentational step lists without JS state.

When not

• Chronological event history — use Timeline.
• Tabbed content without a sequential “progress” metaphor — use Navs & Tabs.
• Do not invent <velin-step> children or an orientation attribute — WC steps come from labels; vertical layout is CSS-only.

CSS stepper

Use .velin-stepper with .velin-stepper__step, __indicator, and __label. Mark state with --active / --completed.

<div class="velin-stepper" role="list" aria-label="Checkout progress">
  <div class="velin-stepper__step velin-stepper__step--completed" role="listitem">
    <span class="velin-stepper__indicator" aria-hidden="true"></span>
    <span class="velin-stepper__label">Account</span>
  </div>
  <div class="velin-stepper__step velin-stepper__step--active" role="listitem" aria-current="step">
    <span class="velin-stepper__indicator" aria-hidden="true"></span>
    <span class="velin-stepper__label">Profile</span>
  </div>
  <div class="velin-stepper__step" role="listitem">…</div>
</div>

Web component

Pass comma-separated labels and a zero-based active index. Drive progress with next(), prev(), or goTo(n) (dispatches velin-step-change). Default-slot children render in part="panels" for accompanying step content you show/hide from that event.

<velin-stepper id="stepper" active="1"
  labels="Account,Profile,Review,Done" aria-label="Checkout">
</velin-stepper>

<button type="button" onclick="document.getElementById('stepper').prev()">Previous</button>
<button type="button" onclick="document.getElementById('stepper').next()">Next</button>

Vertical layout

Add .velin-stepper--vertical on the CSS stepper. The web component has no orientation attribute.

<div class="velin-stepper velin-stepper--vertical" role="list" aria-label="Onboarding">
  <div class="velin-stepper__step velin-stepper__step--completed" role="listitem">…</div>
  <div class="velin-stepper__step velin-stepper__step--active" role="listitem" aria-current="step">…</div>
  <div class="velin-stepper__step" role="listitem">…</div>
</div>

Accessibility

• WC steps list uses role="list" with per-step role="listitem" and status in aria-label.
• Active step gets aria-current="step"; completed markers include visually hidden “Completed” text.
• Override the list name with aria-label (observed; default "Progress").
• The stepper itself is display-oriented — pair with buttons that call next() / prev().
• CSS steppers should mirror list semantics (role="list" / listitem + aria-current) as in the examples.

API (<velin-stepper>)

Attributes

Methods & events

Parts: steps, panels. Default slot = panel nodes.

Best practices & pitfalls

• Drive the indicator from app buttons via next() / prev() / goTo(); listen for velin-step-change.
• There is no <velin-step> element and no WC vertical orientation attribute.
• Prefer deprecated-free <velin-stepper> over <velin-stepper-wc>.

Related

• Timeline
• Progress
• Navs & Tabs

Legacy *-wc tags

<velin-tooltip-wc> and <velin-stepper-wc> remain registered as deprecated aliases. Prefer <velin-tooltip> and <velin-stepper> in new markup.