</> `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 are 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. `root.server` will be used as error key.	<Form onError={({ response }) => {}} />
`headers`	`Record<string, string>`	Request headers object.	<Form headers={{ accessToken: 'xxx', '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:

React Web

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>
  )
}

React Native

import { useForm, Form } from "react-hook-form"
function App() {
  const {
    control,
    register,
    formState: { isSubmitSuccessful, errors },
  } = useForm()
  return (
    <Form
      action="/api"
      control={control}
      render={({ submit }) => {
        ;<View>
          {isSubmitSuccessful && <Text>Form submit successful.</Text>}

          {errors?.root?.server && <Text>Form submit failed.</Text>}
          <Button onPress={() => submit()} />
        </View>
      }}
    />
  )
}

Thank you for your support

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

Form

</> Form: Component

Props

Thank you for your support

</> `Form:` Component