FormKitMultiStep

FormKitMultiStep is a Vue 3 component focused on creating schema-based multi-step forms with FormKit. It grew from discussions and examples in a number of FormKit GitHub issues, so thank you to that team for the starting point and a great library in FormKit.

FormKitMultiStep is experimental, rather opinionated, and is subject to rapid changes. Use it at your own discretion.

Here are some things FormKitMultiStep currently includes:

• Multi-step functionality via useSteps plugin
• Pre-pop functionality via usePrepop plugin, including pre-pop from URL params
• A built-in $submit function with:
  • Ability to pass a function to prep form data
  • Control over post-submit redirection with param substitution
• Simple mapping of error codes to messages defined on the form schema (if provided $submit is used)
• Use an inputMap on the form schema to dynamically control which inputs are enabled based on a key passed to $inputIsEnabled
• Map redirect URLs to specific form values via redirectMap on the form schema (if provided $submit is used)
• Pass additional form-wide metadata in a type: 'meta' top-level schema node, use as $meta.myField
• Utility to populate schema values from url params: $urlParam("pitch", "Default text")

FormKitMultiStep is exported as a component library with vite and available on NPM as formkit-multistep. To play around with it, clone this repo and then do the following to bring up App.vue:

npm install
npm run dev