Form

Use the <Form /> component to create individual forms and combine it with the methods returned from your useForm hook.

import { Form } from "@formatomus/core";
import { useForm } from "react-hook-form";

const Component = () => {
  const methods = useForm();
  
  return (
    <Form methods={methods}>
      ...
    </Form>
  );
};

Now any <FormElement /> components nested in this form will use the methods passed here as their context.

Listening to Submissions

To listen to form submissions use the methods.handleSubmit() utility given by the useForm hook, and pass a SubmitHandle function to it.

caution

The useForm hook must be strictly typed to avoid TypeScript complaining

import { Form, FormElement } from "@formatomus/core";
import { useForm, SubmitHandler } from "react-hook-form";

type FormData = { firstName: string };

const Component = () => {
  const methods = useForm<FormData>();

  const onSubmit: SubmitHandler<FormData> = (data) => {
    console.log(data); // { firstName: "..." }
  };

  return (
    <Form methods={methods} onSubmit={methods.handleSubmit(onSubmit)}>
      ...
    </Form>
  );
};

Styling

Use the native className prop as the styling is completely up to you!

<Form className="my-class-name" />

Component API

The Form component includes all props the native <form /> element has, as well as:

Props	Default	Description
methods	required	UseFormReturn The return methods of your useForm hook