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?

[Michahide]

i just recently found how to use it based on the docs (although the documentation is not very descriptive)

useField Docs

so based on the param, you should pass like this when you use

import { useForm } from '@tanstack/react-form';
const form = useForm({...})

or

import { useAppForm } from '@/components/react-form';
const form = useAppForm({...})

then, you can pass the form into the useField

import { useField } from '@tanstack/react-form';

const field = useField({
form,
name='example_field',
mode='array',  // or any mode based on docs
...fieldOptions
})

where fieldOptions is params you passed like the usual params in <form.Field ... > or <form.AppField ...>
1st Example of form.Field

More info about the available properties on field options
Field Options Properties