Steppers

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.

function onCompleteHandler(e: Event): void { console.log('event:complete', e); }

<Stepper on:complete={onCompleteHandler}>
	<Step>(content)</Step>
	<Step>(content)</Step>
	<!-- ... -->
</Stepper>

Next and Previous

Events are fired when the next or previous steps are pressed.

<Stepper on:next={onNextHandler} on:back={onBackHandler}>...</Stepper>

Step Slots

Each Step component supports a header and default (read: content) slot region.

<Step>
	<svelte:fragment slot="header">(header)</svelte:fragment>
	(content)
</Step>

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.

let lockedState: boolean = true;

<Step locked={lockedState}>...</Step>