Add Form Example to showcase integration with TanStack Form

[sohamnandi77]

🙋 Documentation Request

Problem Description
When using TanStack Form with react-aria-components, everything works well for handling validation and submission. However, there is some problem regarding focus-management, the first invalid input field is not auto-focused when a form validation error occurs.

Current Example
Below is an example of a login form implementation using TanStack Form and Zod for validation.

'use client'

const TanstackForm = () => {
  const form = useForm({
    defaultValues: {
      email: "",
      password: "",
      rememberMe: false,
    },
    onSubmit: async ({ value }) => {
      console.log(value);
    },
  });

  return (
          <Form
            validationBehavior="aria"
            onSubmit={async (e) => {
              e.preventDefault();
              e.stopPropagation();
              await form.handleSubmit();
            }}
          >
            <div className="grid gap-4">
              <div className="grid gap-2">
                <form.Field
                  name="email"
                  children={(field) => (
                    <TextField
                      className="space-y-1"
                      id="email"
                      type="email"
                      name={field.name}
                      value={field.state.value}
                      onChange={field.handleChange}
                      isInvalid={field.state.meta.errors.length > 0}
                      isRequired
                    >
                      <Label htmlFor="email">Email</Label>
                        <TextFieldInput required />
                        </div>
                    </TextField>
                  )}
                />
              </div>
              <div className="grid gap-2">
                <form.Field
                  name="password"
                  children={(field) => (
                    <TextField
                      className="space-y-1"
                      id={field.name}
                      name={field.name}
                      type={showPassword ? "text" : "password"}
                      value={field.state.value}
                      onChange={field.handleChange}
                      isInvalid={field.state.meta.errors.length > 0}
                      isRequired
                    >
                        <Label htmlFor="password">Password</Label>
                        <TextFieldInput required />
                    </TextField>
                  )}
                />
              </div>
              <Button type="submit" className="w-full">
                Login
              </Button>
            </div>
          </Form>
  );
};

🧢 Your Company/Team

No response

[dannify]

Hi @sohamnandi77
There is not enough information here for us to respond to. Perhaps you meant to ask a question in discussions? Please go ahead and add some more details there including an isolated example in a codesandbox/stackblitz to help explain what you are seeing. Thanks!