> For the complete documentation index, see [llms.txt](https://aegion-dynamic.gitbook.io/nimbus/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://aegion-dynamic.gitbook.io/nimbus/code-practices/utilizing-react-hook-forms.md).

# Utilizing React Hook Forms

Use react-hook-form for tracking the data, implementing validation for the data inputs. You can learn more about react-hook-form in their documentation (<https://react-hook-form.com/>). Given below is an example for how the forms are supposed to be used.

```tsx
import React from "react";
import { useForm, SubmitHandler } from "react-hook-form";

type FormValues = {
    firstName: string;
    lastName: string;
    email: string;
};

export default function App() {
    const { register, handleSubmit, reset } = useForm<FormValues>();
    const onSubmit: SubmitHandler<FormValues> = (data) => console.log(data);

    return (
        <form onSubmit={handleSubmit(onSubmit)}>
            <input {...register("firstName")} />
            <input {...register("lastName")} />
            <input type="email" {...register("email")} />

            <input type="submit" />
        </form>
    );
}
```