Steppers

Svelte Component

Divide and present content in sequenced steps.

@skeletonlabs/skeleton
Source Code
View Page Source

Examples

Step 1 - Get Started!

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

Step 2

Step 3 - locked Property

Step 4 - clickNavigation Property

Step 5

Step 6

Getting Started

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>

Completion Event

You may optionally implement a function to handle your Stepper's on:complete event.

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