Build dynamic multi-step forms faster

Installation

Install the package and required form dependencies.

npx @aravindvjn/stepper-form init

Quick Usage

Define your schema, create a steps config, and pass it into the stepper form.

import { StepperForm } from "@aravindvjn/stepper-form";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";

const schema = z.object({
  full_name: z.string().min(1, "Full name is required"),
  email: z.string().email("Enter a valid email"),
  skills: z.array(z.string()).min(1, "Select at least one skill"),
});

type FormInput = z.input<typeof schema>;
type FormValues = z.output<typeof schema>;

const steps = [
  {
    step: 1,
    title: "Basic Details",
    fields: [
      {
        name: "full_name",
        label: "Full Name",
        type: "text",
        placeholder: "Enter your full name",
        required: true,
      },
      {
        name: "email",
        label: "Email",
        type: "email",
        placeholder: "Enter your email",
        required: true,
      },
    ],
  },
  {
    step: 2,
    title: "Skills",
    fields: [
      {
        name: "skills",
        label: "Skills",
        type: "multi-select",
        required: true,
        options: [
          { label: "React", value: "react" },
          { label: "Next.js", value: "nextjs" },
          { label: "TypeScript", value: "typescript" },
        ],
        selectProps: {
          searchable: true,
        },
      },
    ],
  },
];

export default function Example() {
  const form = useForm<FormInput, any, FormValues>({
    resolver: zodResolver(schema),
    defaultValues: {
      full_name: "",
      email: "",
      skills: [],
    },
  });

  return (
    <StepperForm
      form={form}
      steps={steps}
      title="Example Form"
      description="Simple reusable stepper form"
      onSubmit={(values) => {
        console.log(values);
      }}
    />
  );
}

Notes