Wizard Modal

A wizard that finds place within a modal to guide the user through miscellaneous options and information to execute a final action.

<script lang="ts">let visible = false;
const steps = [
    name: "EnterController",
    title: "Enter a controller"
    name: "ConfirmController",
    title: "Confirm the controller"
let currentStep;
let modal;
const next = () => modal.next();

<button on:click={() => (visible = true)} class="primary">
  Open modal

{#if visible}
    <WizardModal {steps} bind:currentStep bind:this={modal} on:nnsClose={() => (visible = false)}>
      <svelte:fragment slot="title">My title</svelte:fragment>

      {#if currentStep?.name === "EnterController"}
        <p>Step to enter the controller</p>

        <button class="primary" on:click={modal.next}>
      {#if currentStep?.name === "ConfirmController"}
        <p>Step to confirm the controller</p>


Unlike the <Modal /> that can be toggled through a property, the developer has to wrap the wizard within a condition to render the component or not.

Likewise, it is up to developer to handle the currentStep and render the correct information accordingly.


Property Description Type Default
steps The configuration of the steps of the wizard. WizardSteps
currentStep The current step. A property to bind. WizardStep or undefined undefined


In addition to the properties, the component exposes various functions.

Function Description
next Go to next step of the wizad.
back Go to previous step of the wizard.
set Jump to a particular step of the wizard.