Skip to content

Form

Take care of form submission

</> 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

NameTypeDescriptionExample
controlControlcontrol object provided by invoking useForm. Optional when using FormProvider.
<Form control={control} />
childrenReact.ReactNode
renderFunctionRender prop function suitable for headless component.
<Form render={({ submit }) => <View/>} />
onSubmitFunctionFunction invoked after successful validation.
<Form onSubmit={({ data }) => mutation(data)} />
onSuccessFunctionFunction called after successful request to the server.
<Form onSuccess={({ response }) => {}} />
onErrorFunctionFunction 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 }) => {}} />
headersRecord<string, string>Request headers object.
<Form headers={{ accessToken: 'xxx', 'Content-Type': 'application/json' }} />
validateStatus(status: number) => booleanFunction 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.