Skip to content

[Feature Request]: Form Groups #419

Open
@crutchcorn

Description

@crutchcorn

Description

When building a form stepper, like so:

image

It's common for each step to have its own form. However, this complicates the form submission and validation process by requiring you to add complex logic.

Ideally, it would be nice to have a FormGroup where you could validate the group, but not the form itself - submit the value and move on to the next step.

Describe the solution you'd like

What if there was something like this psuedo-API?

import { useState } from "react";
import { useForm } from "@tanstack/react-form";
// Import might change
import { za } from "@tanstack/zod-form-adapter";

const StepperForm = () => {
  const [step, setStep] = useState(0);
  const form = useForm({ onSubmit: () => {} });

  return (
    <form.Provider>
      <form {...form.getFormProps()}>
        <div>
          {step === 1 && (
            <form.FormGroup
              onGroupSubmit={() => {
                setStep(step + 1);
              }}
              preserveState={true}
            >
              <form.Field
                name="step1.name"
                onSubmit={za(z.string().thing())}
                onGroupSubmit={za(z.string().thing())}
              >
                <Input />
              </form.Field>
            </form.FormGroup>
          )}

          {step === 2 && (
            <form.FormGroup onGroupSubmit={submit} preserveState={true}>
              <form.Field
                name="step2.name"
                onSubmit={za(z.string().thing())}
                onGroupSubmit={za(z.string().thing())}
              >
                <Input />
              </form.Field>
            </form.FormGroup>
          )}
        </div>
      </form>
    </form.Provider>
  );
};

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions