https://github.com/edenriquez/svelte-multistep-form

Svelte MultiStep Form like, this component is still in beta stage
https://github.com/edenriquez/svelte-multistep-form

form forms hacktoberfest multistep-form styled-components stylish svelte svelte-v3

Last synced: 2 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/edenriquez/svelte-multistep-form
• Owner: edenriquez
• License: mit
• Created: 2020-02-16T05:58:27.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2021-11-02T05:04:17.000Z (about 3 years ago)
• Last Synced: 2024-12-12T21:17:56.424Z (24 days ago)
• Topics: form, forms, hacktoberfest, multistep-form, styled-components, stylish, svelte, svelte-v3
• Language: JavaScript
• Homepage:
• Size: 4.8 MB
• Stars: 33
• Watchers: 2
• Forks: 5
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# svelte multistep form [![NPM Version](https://badge.fury.io/js/svelte-multistep-form.svg?style=flat)](https://npmjs.org/package/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

```javascript

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 ``

```javascript

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

```html

   // Here should be your form 

```

## Submit form data

```html

  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 = "";

  };

  

    

  

  

    

      Save me

    

  

```

## Calling programatically nextStep and previousStep

```html

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:

```bash

cd examples

npm i

npm run dev

```

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