Svelte Component

Steppers

Divide and present content in sequenced steps.

typescript 
import { Stepper, Step } from '@skeletonlabs/skeleton';
Source Page Source Transitions

Demo

Get Started!

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

Create a set of Steps within the Stepper, then use the on:complete event to detect when all steps are complete. Since horizontal space may be limited on small screens, we recommend no more than five steps at max.

Event Handlers

Complete Event

typescript 
function onCompleteHandler(e: Event): void { console.log('event:complete', e); }
html 
<Stepper on:complete={onCompleteHandler}>...</Stepper>

Next, Step and Previous

Events are fired when the next or previous steps are pressed, step fires for both cases.

typescript 
function onStepHandler(e: {detail: {state: {current: number, total: number}, step: number}}): void {
	console.log('event:step', e);
}
html 
<Stepper on:next={onNextHandler} on:step={onStepHandler} on:back={onBackHandler}>...</Stepper>
TIP: e.detail.state.current contains the step shown to the user after navigation, e.detail.step contains the step where navigation occurred.

Locked State

Each Step can have a locked property set, when set to TRUE this locks progression for that step. For example, you can lock a step until a form within it becomes valid.

typescript 
let lockedState: boolean = true;
html 
<Step locked={lockedState}>...</Step>

Step Term

Use the stepTerm property to override text shown in the animated section at the top of the Stepper, which is useful if you need i18n support for other languages.

html 
<!-- German: Schritt 1, Schritt 2, ... This will override the stepTerm in the Step Counter -->
<Stepper stepTerm="Schritt">
	<!-- French: Étape 1, Étape 2, ... -->
	<Step stepTerm='Étape'>...</Step>
	<!-- Spanish: Paso 1, Paso 2, ... -->
	<Step stepTerm='Paso'>...</Step>
</Stepper>

This can be overwritten per each Step as well, which updates the default and header slot placeholder text.

Navigation Slot

You may override the contents of the disabled Back button in the first step by supplying a navigation slot. Use this to supply a message or implement a custom action. This is not supported for step two and forward.

html 
<Step>
	<p>(content)</p>
	<svelte:fragment slot="navigation">
		<button class="btn variant-ghost-error" on:click={triggerAbort}>Abort</button>
	</svelte:fragment>
</Step>