svelte multistep form 
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 devGo to http://localhost:5000 to see it in action