Multistep Form

The Minutes framework helps you easily create forms with multiple steps, enabling a streamlined and intuitive user experience for complex forms.

Props

Name	Type	Default	Description
steps	ReactNode[]	-	An array of form components for each step. Each component must implement the required fields for its step.
onFormSubmit	(data) => void	-	A function that handles the final submission of the aggregated form data after completing all steps.

Example Usage

Here’s an example of implementing a multistep form using the Minutes framework.

Step Components

Each step of the form is represented as a React component. These components utilize the useMultistepForm hook to manage step-specific data and validations.

Step 1

const Step1 = () => {
  const { formData } = useMultistepForm()

  return (
    <Box sx={{ p: '20px' }}>
      <Form
        fields={STEP_1_FIELDS}
        defaultFormValues={formData}
        isMultiStep
        validationSchema={STEP_1_SCHEMA}
      />
    </Box>
  )
}

Step 2

const Step2 = () => {
  const { formData } = useMultistepForm()

  return (
    <Box sx={{ p: '20px' }}>
      <Form
        fields={STEP_2_FIELDS}
        defaultFormValues={formData}
        isMultiStep
        validationSchema={STEP_2_SCHEMA}
      />
    </Box>
  )
}

Step 3

The final step must call the handleFormSubmit function to submit the aggregated data.

const Step3 = () => {
  const { handleFormSubmit, formData } = useMultistepForm()

  return (
    <Box sx={{ p: '20px' }}>
      <Form
        fields={STEP_3_FIELDS}
        defaultFormValues={formData}
        onFormSubmit={handleFormSubmit}
        isMultiStep
        validationSchema={STEP_3_SCHEMA}
      />
    </Box>
  )
}

Wrapping the Steps in MultistepForm

Finally, use the MultistepForm component to wrap the steps and pass a submission handler to aggregate and process the data.

export const JobApplicationForm: React.FC<TJobApplicationFormProps> = () => {
  // Handler for form submission
  const handleFormSubmit = (data: TJobApplicationFormSubmitData) => {
    // Send data to Backend
    console.log(data)
  }

  return (
    <MultistepForm
      steps={[<Step1 />, <Step2 />, <Step3 />]}
      onFormSubmit={handleFormSubmit}
    />
  )
}

Key Notes

1. Data Management:

   • Use useMultistepForm to manage form data across steps.
   • formData contains the aggregated data from all completed steps.

2. Validation:

   • Each step can have its own validation schema passed via the validationSchema prop.
   • Ensure schemas align with the requirements of their respective steps.

3. Final Submission:

   • The final step must use handleFormSubmit from useMultistepForm to trigger the final data submission.

4. Dynamic Steps:

   • Steps can be dynamically added or removed by modifying the steps array passed to the MultistepForm component.

5. Styling:

   • Utilize the sx prop for Material UI styling in each step for customization.

By following this approach, you can easily implement and customize multistep forms using the Minutes framework for any application.