Is there any example on how to use the useField Hook?

[Eyon42]

I've been trying to figure it out, but I'm having a hard time.

Also, I found that createUseField is in the docs but it's not exposed as part of the module

https://tanstack.com/form/latest/docs/framework/react/reference/useField#createusefield

[Eyon42]

For more context

I'm having a use case where I need to use the form API in múltiple nested react components and passing as a prop is not an option.

Currently I'm doing this, but it seems like I'm reinventing the wheel

import { type FormApi, useForm } from "@tanstack/react-form";
import { zodValidator } from "@tanstack/zod-form-adapter";
import { createContext, useContext, type ReactNode } from "react";

const NewGroupFormContext = createContext<FormApi<
  typeof defaultValues,
  typeof zodValidator
> | null>(null);

export const useNewGroupForm = () => {
  const form = useContext(NewGroupFormContext);
  if (form === null) {
    throw new Error("useNewGroupForm must be used within a NewGroupLayout");
  }
  return form;
};

type NewGroupLayoutProps = {
  children: ReactNode;
};

const defaultValues = {
  groupName: "",
};

export default function NewGroupLayout({ children }: NewGroupLayoutProps) {
  const form = useForm({
    defaultValues,
    validator: zodValidator,
  });
  return (
      <NewGroupFormContext.Provider value={form}>
        <form.Provider>{children}</form.Provider>
      </NewGroupFormContext.Provider>
  );
}

[crutchcorn]

This looks fine to me overall. What's not working or missing?

[AndreasFaust]

I am also looking for an example of how to use useField in Vue. Can’t find anything anywhere and am therefore unable to split my form into multiple components in a clean manner.
This library is very promising, but the docs lack examples, IMO.

[crutchcorn]

You're not intended to use useField in any framework at all. It's a private internal API not meant for public usage.

[AndreasFaust]

Thank you for the quick reply!
Is there an example for how to split up a form into multiple components?