Skip to main content
Version: v6.8.1

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!