Stepper

A step indicator for a linear multi-step flow — done / current / upcoming markers + connectors. It shows position; your panels + Next/Back (and validation) drive bind:current. Horizontal or vertical; shared variant/size axes.

Wizard (Next / Back)

Account

Your details
Profile

About you
Billing

Payment
Review

Confirm

Account

Step 1 of 4 — Your details. (Your panel content goes here.)

<script>
  import { Stepper, Button } from '@spaethtech/svelte-ui';
  const steps = [
    { label: 'Account', description: 'Your details' },
    { label: 'Profile', description: 'About you' },
    { label: 'Review' },
  ];
  let current = $state(0);
</script>

<Stepper {steps} bind:current
  onstep={(i) => { if (i <= current) current = i; }} />

<!-- Your panels + Next/Back drive current, with your own validation -->
<Button text="Back" onclick={() => current--} disabled={current === 0} />
<Button text="Next" variant="primary" onclick={() => current++} />

Vertical

Account

Your details
2

Profile

About you
3

Billing

Payment
4

Review

Confirm

Sizes

Account

Your details
2

Profile

About you
3

Billing

Payment

Account

Your details
2

Profile

About you
3

Billing

Payment