Multi Step Form

Candidate

..write your name here...

Objective:

Implement a multi-step form wizard in a React app using TypeScript

Instructions:

Create a new React app using TypeScript. Implement a multi-step form wizard with at least 3 steps. The form should include the following features:

• Each step should display a set of questions or inputs.
• Provide a "Next" button to navigate to the next step, and a "Previous" button to go back.
• On the final step, include a "Submit" button.
• After submission, display the submitted answers in a designated bottom section.
• Implement a reset function that clears the form data after submission.
• All fields should be required, and appropriate error messages should be displayed for empty required fields.
• Include validation to ensure all required fields are filled before proceeding to the next step.
• Add a condition where the "Next" button is enabled only if all fields in the current step are filled.

NOTE: suggestion lib form: react-hook-form

Assessment Criteria:

The assessment will be based on the following:

• Minimal UI are allowed.
• Correct implementation of a React app with TypeScript.
• Proper organization and structure of the multi-step form wizard.
• Functionality to navigate between steps using "Next" and "Previous" buttons.
• Submission of the form and display of the submitted answers.
• Reset functionality after submission.
• Field validation to ensure required fields are filled.
• Condition to enable the "Next" button when all fields in the current step are filled.
• Code cleanliness, readability, and adherence to best practices.