https://github.com/purwnt/multi-step-form

https://github.com/purwnt/multi-step-form

Last synced: 26 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/purwnt/multi-step-form
• Owner: purwnt
• Created: 2023-06-21T08:19:02.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2023-06-21T08:22:22.000Z (over 1 year ago)
• Last Synced: 2024-12-05T17:49:53.527Z (29 days ago)
• Language: TypeScript
• Size: 137 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
 # 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.