Steppers

Svelte Component

Divide and present content in sequenced steps.

@skeletonlabs/skeleton
View Source
Doc Source

Examples

1

Step 1 - Get Started!

This example will teach you how to use the Stepper component. Tap next to proceed forward.

2

Step 2

🔒

Step 3

4

Step 4

5

Step 5

Usage

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

typescript 
import { writable, type Writable } from 'svelte/store';
typescript 
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.

html 
<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.

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