[Feature Request]: Form Groups

[crutchcorn]

Description

When building a form stepper, like so:

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>
  );
};

[Christian24]

Just wanted to leave some additional context: We sometimes have quite complex forms that have a lot of fields that are only visible on a certain condition, say for example a billing and a delivery address, they are basically the same, but one is only used under the condition that the two are not the same. So FormGroups can be a great way to structure a form as well.

[timothyac]

+1

At AWS, a common pattern we implement is a “Wizard” pattern which guides a user through a multi-step form.

Example: https://cloudscape.design/examples/react/wizard.html

[francesconi]

I'm currently working on a multi-step form, similar to a wizard. The proposed form.FormGroup component would simplify the code a lot.

[crutchcorn]

@timothyac we're not quite ready for this feature yet as part of our 1.x release, but we'll work on it soon after!

That said, I'd love to help the AWS team figure out how to integrate Cloudscape with TanStack Form when it's ready. If y'all need any help with anything, let me know (even via DMs - they're open)