/multi-step-form

Multi-Step Form with React and SCSS

Primary LanguageHTML

Multi-Step Form with React and SCSS

This is a dynamic multi-step form built using React and styled with SCSS. The form allows users to complete each step of the sequence, go back to previous steps to update their selections, view a summary of their choices on the final step, and confirm their order. It is also responsive, adapting to different screen sizes for optimal user experience.

Table of contents

Overview

Features

  • Multi-Step Form: The form is divided into multiple steps, ensuring a smooth and intuitive user experience.

  • Step Navigation: Users can navigate between steps and update their selections without losing progress.

  • Summary and Confirmation: On the final step, users can review their selections before confirming their order.

  • Responsive Design: The interface adapts to different screen sizes, making it accessible on various devices.

  • Interactive States: All interactive elements (buttons, fields) have hover and focus states for better user feedback.

  • Form Validation: The form includes validation messages to prompt users if they miss a required field, enter an incorrectly formatted email address, or submit a step without making any selection.

Screenshot

Links

My process

Built with

  • React.js
  • SCSS

Author