<ValidatedForm />

(props: FormProps<DataType>) => ReactNode

Native form props

ValidatedForm can accept all the same props as a regular HTML form element with the following exceptions.

• onSubmit has a different signature for ValidatedForm
• ref is not directly support, but you can use formRef

FormProps

validator

Validator<DataType>

A Validator object that describes how to validate the form. The generic type DataType is the type of the data that the form is expecting. If you provide an onSubmit prop to the ValidatedForm, it will be called with the form data and be correctly typed as DataType.

const validator = withZod(z.object({ name: z.string() }));

<ValidatedForm validator={validator} />;

defaultValues

Partial<DataType>

Optional

An object to be used for the default values of the form fields.

resetAfterSubmit

boolean

Optional

Reset the form to the default values after the form has been successfully submitted. This is useful if you want to submit the same form multiple times, and don't redirect in between submissions.

subaction

string

Optional

Allows you to specify a "subaction" for the form. This adds a hidden input to the form with the value of the subaction. The purpose of this is to allow you to handle multiple forms in the same action function.

export const action = async ({
  request,
}: DataFunctionArgs) => {
  const data = await request.formData();

  // This will be `form1` or `form2`
  // depending on which form you submitted
  const subaction = data.get("subaction");

  // etc
};

export default function MyPage() {
  return (
    <>
      <ValidatedForm
        validator={validator}
        subaction="form1"
        method="post"
      >
        <MyInput name="name" />
        <SubmitButton />
      </ValidatedForm>

      <ValidatedForm
        validator={validator}
        subaction="form2"
        method="post"
      >
        <MyInput name="something" />
        <SubmitButton />
      </ValidatedForm>
    </>
  );
}

onSubmit

(data: DataType, event: React.FormEvent<HTMLFormElement>) => void | Promise<void>

Optional

A submit callback that gets called when the form is submitted. The first argument is the parsed/validated form data, and the second argument is the native submit event.

Even though this callback can return a promise, event.preventDefault can still be used to abort the submission.

const validator = withZod(z.object({ name: z.string() }));

<ValidatedForm
  validator={validator}
  onSubmit={async (data) => {
    // Data is an object with a `name` property
    // of type `string` because of the validator above.
    console.log(data.name);
  }}
/>;

formRef

React.RefObject<HTMLFormElement>

Optional

A ref to the underlying form element.

fetcher

Fetcher

Optional

Allows you to provide a fetcher from Remix's useFetcher hook. The form will use the fetcher for loading states, action data, etc instead of the default form action. This can be useful for when you need to submit the form programatically but still have validation errors show up.

disableFocusOnError

boolean

Optional

Normally, the first invalid input will be focused when the validation fails on form submit. Set this to false to disable this behavior.