Skip to main content

Form

const Form: <TFieldValues, TContext, TTransformedValues>(props) => Element = FormProvider

Main form component that serves as a wrapper for react-hook-form's FormProvider

Based on Form

A provider component that propagates the useForm methods to all children components via React Context API. To be used with useFormContext.

Type Parameters​

TFieldValues​

TFieldValues extends FieldValues

TContext​

TContext = any

TTransformedValues​

TTransformedValues = TFieldValues

Parameters​

props​

FormProviderProps<TFieldValues, TContext, TTransformedValues>

all useForm methods

Returns​

Element

Remarks​

API • Demo

Example​

function App() {
  const methods = useForm();
  const onSubmit = data => console.log(data);

  return (
    <FormProvider {...methods} >
      <form onSubmit={methods.handleSubmit(onSubmit)}>
        <NestedInput />
        <input type="submit" />
      </form>
    </FormProvider>
  );
}

 function NestedInput() {
  const { register } = useFormContext(); // retrieve all hook methods
  return <input {...register("test")} />;
}

Example​

function MyComponent() {
  const form = useForm({...});

  return (
    <Form {...form}>
      ...
    </Form>
  );
}