Multi Step

Multi Step Form

We have a fullscreen multistep form, the multistep form is located at src/app/multi-step.

And all the steps components are avilable in src/app/shared/multi-step/multi-step-1 directory.

Adding a New Step

Start by creating a component according to your requirements. Next, seamlessly import the component into the src/app/shared/multi-step/multi-step-1/index.tsx file, as shown below:

src/app/shared/multi-step/multi-step-1/index.tsx

import StepOne from '@/app/shared/multi-step/multi-step-1/step-1';
import StepTwo from '@/app/shared/multi-step/multi-step-1/step-2';
import StepThree from '@/app/shared/multi-step/multi-step-1/step-3';
import StepFour from '@/app/shared/multi-step/multi-step-1/step-4';
import StepFive from '@/app/shared/multi-step/multi-step-1/step-5';
import StepSix from '@/app/shared/multi-step/multi-step-1/step-6';
import StepSeven from '@/app/shared/multi-step/multi-step-1/step-7';
import Congratulations from '@/app/shared/multi-step/multi-step-1/congratulations';

Specify the type and default values for your creation:

src/app/shared/multi-step/multi-step-1/index.tsx

type formDataType = {
  propertyType: string;
  placeType: string;
  address: string | undefined;
  lat: number | undefined;
  lng: number | undefined;
  guests: number | undefined;
  bedrooms: number | undefined;
  beds: number | undefined;
  bedroomLock: string;
  guestType: string;
  indoorAmenities: string[] | undefined;
  outdoorAmenities: string[] | undefined;
  propertyName: string;
  propertyDescription: string | undefined;
  priceRange: number[] | undefined;
  photos: string | undefined;
  yourNewInput: string | undefined;
};

export const initialFormData = {
  propertyType: '',
  placeType: '',
  address: '',
  lat: undefined,
  lng: undefined,
  guests: undefined,
  bedrooms: undefined,
  beds: undefined,
  bedroomLock: '',
  guestType: '',
  indoorAmenities: [],
  outdoorAmenities: [],
  propertyName: '',
  propertyDescription: '',
  priceRange: undefined,
  photos: '',
  yourNewInput: undefined,
};

Now, add your component to the enum list:

src/app/shared/multi-step/multi-step-1/index.tsx

export enum Step {
  StepOne,
  StepTwo,
  StepThree,
  StepFour,
  StepFive,
  StepSix,
  StepSeven,
  StepEight,
}

Complete the process by registering your component in the component mapper:

src/app/shared/multi-step/multi-step-1/index.tsx

const MAP_STEP_TO_COMPONENT = {
  [Step.StepOne]: StepOne,
  [Step.StepTwo]: StepTwo,
  [Step.StepThree]: StepThree,
  [Step.StepFour]: StepFour,
  [Step.StepFive]: StepFive,
  [Step.StepSix]: StepSix,
  [Step.StepSeven]: StepSeven,
  [Step.StepEight]: Congratulations,
};

Voila! Your Multistep Form Now Includes a New Step!