FormProvider

The FormProvider component is part of Conform's future export. These APIs are experimental and may change in minor versions. Learn more

A React component that renders a Context Provider for the form context. It is required if you want to use useField or useFormMetadata hook.

1import { FormProvider, useForm } from '@conform-to/react/future';
2
3export default function SomeParent() {
4  const { form } = useForm();
5
6  return <FormProvider context={form.context}>{/* ... */}</FormProvider>;
7}

#Props

`context`

The form context. It is created with useForm and can be accessed through form.context.

#Tips

FormProvider can be nested

This is useful if you need to have one form inside another due to layout constraints.

1import { FormProvider, useForm, useField } from '@conform-to/react/future';
2
3function Layout({ children }) {
4  const { form, fields } = useForm({ id: 'search' });
5
6  return (
7    <FormProvider context={form.context}>
8      <aside>
9        <form {...form.props}>
10          <Field name={fields.query.name} />
11          <button>Search</button>
12        </form>
13      </aside>
14      <main>{children}</main>
15    </FormProvider>
16  );
17}
18
19function LoginForm() {
20  const { form, fields } = useForm({ id: 'login' });
21
22  return (
23    <Layout>
24      <FormProvider context={form.context}>
25        <form {...form.props}>
26          <Field name={fields.username.name} />
27          <Field name={fields.password.name} />
28          <button>Login</button>
29        </form>
30      </FormProvider>
31    </Layout>
32  );
33}
34
35function Field({ name, formId }) {
36  //  useField will look for the closest FormContext if no formId is provided
37  const field = useField(name, { formId });
38
39  return <input name={field.name} form={field.form} />;
40}