Form: Component

Note: This component is currently in BETA

This component is optional and it takes care of the form submission by closely aligning with the standard native form.

By default, we will send a POST request with your form submission data as FormData. You can supply headers prop to avoid FormData to be submitted and use application/json instead.

Progressively enhancement for your form.
Support both React Web and React Native.
Take care of form submission handling.

<Form
  action="/api"
  method="post" // default to post
  onSubmit={() => {}} // function to be called before the request
  onSuccess={() => {}} // valid response
  onError={() => {}} // error response
  validateStatus={status => status >= 200} // validate status code
/>

Props

All props all optional

Name	Type	Description	Example
`control`	`Control`	`control` object provided by invoking `useForm`. Optional when using `FormProvider`.	<Form control={control} />
`children`	`React.ReactNode`
`render`	`Function`	Render prop function suitable for headless component.	<Form render={({ submit }) => <View />} />
`onSubmit`	`Function`	Function invoked after successful validation.	<Form onSubmit={({ data }) => mutation(data)} />
`onSuccess`	`Function`	Function called after successful request to the server.	<Form onSuccess={({ response }) => {}} />
`onError`	`Function`	Function called after failed request to the server. `setError` function will be called to update errors state.	<Form onError={({ response }) => {}} />
`headers`	`Record<string, string>`	Request headers object.	<Form headers={{ accessToken: 'xxx', // Json content type // will stringify form data 'Content-Type': 'application/json' }} />
`validateStatus`	`(status: number) => boolean`	Function to validate status code.	<Form validateStatus={status => status === 200} />

Rules

If want to prepare or omit submission data, please use handleSubmit or onSubmit.

const { handleSubmit, control } = useForm();
const onSubmit =(data) => callback(prepareData(data))

<form onSubmit={handleSubmit(onSubmit)} />
// or
<Form onSubmit={({ data }) => { console.log(data) }} />

Progressive Enhancement only applicable for SSR framework.

const { handleSubmit, control } = useForm({
  progressive: true                    
});

<Form onSubmit={onSubmit} control={control} action="/api/test" method="post">
  <input {...register('test', { required: true })} />
</Form />

// Renders
<form action="/api/test" method="post">
  <input required name="test" />
</form>

Examples

import { useForm, Form } from 'react-hook-form';

function App() {
  const {
    control,
    register,
    formState: { isSubmitSuccessful, errors },
  } = useForm({
    // progressive: true, optional prop for progressive enhancement
  });

  return (
    <div>
      // Use action prop to make post submission with formData
      <Form
        action="/api"
        control={control}
        onSuccess={() => {
          alert("Success");
        }}
        onError={() => {
          alert("error");
        }}
      >
        <input {...register("name")} />
  
        {isSubmitSuccessful && <p>Form submit successful.</p>}
  
        {errors?.root?.server && <p>Form submit failed.</p>}
  
        <button>submit</button>
      </Form>
      
      // Manual form submission
      <Form
        onSubmit={async ({ formData, data, formDataJson, event }) => {
          await fetch("api", {
            method: "post",
            body: formData,
          });
        }}
      >
        <input {...register("test")} />
        <button>submit</button>
      </Form>
    </div>
  );
}

Thank you for your support

If you find React Hook Form to be useful in your project, please consider to star and support it.