Steppers

To begin, create a writable that will store your active step value. This should always be set to 0 (zero).

import { writable, type Writable } from 'svelte/store';

const active: Writable<number> = writable(0);

Scaffold your stepper as shown. If no header slot is provided then the component will add "Step X" text automatically.

<Stepper {active} length={2} on:complete={onComplete}>
	<Step index={0}>
		<svelte:fragment slot="header">(header)</svelte:fragment>
		(content)
	</Step>
	<Step index={1} locked={true}>(content)</Step>
</Stepper>

Create a function to handle your Stepper's on:complete event.

const onComplete: any = () => { /* handle the event */ }

Horizontal Steppers

Create a horizontal stepper by setting horizontal to true. Horizontal steppers are dynamic, so they automatically switch to vertical ones if the stepper component does not have enough space to properly display all steps. For the experience of mobile users, using the vertical stepper is generally the better idea.

<Stepper {active} length={2} on:complete={onComplete} horizontal={true}>
	<Step index={0}>
		<svelte:fragment slot="header">(header)</svelte:fragment>
		(content)
	</Step>
	<Step index={1} locked={true}>(content)</Step>
</Stepper>