Skip to content

Svelte MultiStep Form like, this component is still in beta stage

License

Notifications You must be signed in to change notification settings

edenriquez/svelte-multistep-form

Repository files navigation

svelte multistep form NPM Version

Multi Step Form help to wrap form elements passing down styles to the component to be rendered, also it presents each form step in a ordered and stylish way.

Demo

Install

npm install svelte-multistep-form

then import into your code

import { Form, Step } from "svelte-multistep-form";

Usage

First you need to set up the form stepsDescription, formSubtitle and formTitle inside multiStepOptions that later has to be injected into Form component <Form {multiStepOptions}>

let multiStepOptions = {
  formTitle: "New Title ✍️",
  formSubtitle: "Subtitle should be here",
  stepsDescription: [
    { title: "STEP 1", subtitle: "All the details to perform on this step" },
    { title: "STEP 2", subtitle: "All the details to perform on this step" },
  ],
};

After that you only need to call Form and Step component in the following way

<form {multiStepOptions}>
  <Step> // Here should be your form </Step>
</form>

Submit form data

<script>
  import axios from "axios";
  import { Form, Step } from "svelte-multistep-form";

  let multiStepOptions = {
    formTitle: "New Title ✍️",
    formSubtitle: "Subtitle should be here",
    stepsDescription: [
      { title: "Input step", subtitle: "Input to fulfill" },
      { title: "Submit", subtitle: "Save!" },
    ],
  };
  let myInputValue;

  const handleSubmit = () => {
    const formValues = {
      firstStepInput: myInputValue,
    };
    axios.post("http://my-internal-api/submit", formValues);
    myInputValue = "";
  };
</script>

<form {multiStepOptions}>
  <Step>
    <input
      class="your-custom-class"
      id="form-field"
      bind:value="{myInputValue}"
      placeholder="value here..."
    />
  </Step>
  <Step>
    <button class="your-custom-class" on:click|preventDefault="{handleSubmit}">
      Save me
    </button>
  </Step>
</form>

Calling programatically nextStep and previousStep

<script>
let FormComponentRef;
<script/>

<Form  bind:this={FormComponentRef} >
  <Step>
     <div>
        <input
          class="my-button-class"
          type="button"
          on:click|preventDefault={() => FormComponentRef.nextStep()}
        />
      </div>
    </Step>
    <Step>
      <div>
        <input
          class="my-button-class"
          type="button"
          on:click|preventDefault={() => FormComponentRef.previousStep()}
        />
      </div>
    </Step>
</Form>

Examples

checkout /examples folder, run the following commands in order to run examples:

cd examples
npm i
npm run dev

Go to http://localhost:5000 to see it in action 🔥