Build forms without the friction.

import { useForm } from "react-hook-form"

export default function App() {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm()

  return (
    <form onSubmit={handleSubmit(console.log)}>
      <input
        {...register("firstName", {
          required: "First name is required",
          minLength: { value: 2, message: "Min length is 2" },
        })}
      />
      <p>{errors.firstName?.message}</p>

      <input
        {...register("email", {
          required: "Email is required",
          pattern: { value: /^\S+@\S+\.\S+$/, message: "Invalid email" },
        })}
      />
      <p>{errors.email?.message}</p>

      <input
        type="number"
        {...register("age", {
          valueAsNumber: true,
        })}
      />
      <p>{errors.age?.message}</p>

      <button type="submit">Submit</button>
    </form>
  )
}