formwerkjs/formwerk v0.11.0

on GitHub

🚀 Multi-step Forms 🚀

Stepped form flows are a very common pattern around the web. They are used to guide users through a form using steps.

Aside from collecting information from users, they serve many purposes, common ones being:

• Split up large forms into smaller, more manageable parts.
• Conditionally navigate through steps based on user input.

After spending a lot of time on figuring out multi-step forms we now have a first version that can be used in your apps today!

✨ Features

• Automatic navigation through steps in a linear flow.
• Custom navigation through steps in a non-linear flow.
• Schema validation for steps and validates steps before moving to the next one.
• Accessible next/previous navigation buttons.
• Custom step names.

▶️ Quick Example

You can get started quickly by using useStepFormFlow

<script setup lang="ts">
import { useStepFormFlow } from '@formwerk/core';

const {
  formProps,
  nextButtonProps,
  previousButtonProps,
  onDone,
  isLastStep,
  FormStep,
} = useStepFormFlow();

onDone(data => {
  console.log(data.toObject());
});
</script>

<template>
  <form v-bind="formProps">
    <FormStep>
      <TextField name="name" label="Name" />
      <TextField name="email" label="Email" />
    </FormStep>

    <FormStep>
      <TextField name="address" label="Address" />
    </FormStep>

    <FormStep>
      <TextField name="city" label="City" />
    </FormStep>

    <button v-bind="previousButtonProps">⬅️ Previous</button>
    <button v-bind="nextButtonProps">
      {{ isLastStep ? 'Submit' : 'Next ➡️' }}
    </button>
  </form>
</template>

📚 Docs

For more information and examples, check out the documentation.