react-hook-form-6

Performant, flexible and extensible forms with easy to use validation.

Features

Built with performance and DX in mind
Embrace native form validation
Simple integration with UI libraries
Tiny size without any dependency
Follows HTML standard for validation
Resolvers support Yup, Zod, Superstruct, Joi or custom
Build forms quickly with Form Builder

Install

npm install react-hook-form

Quickstart

import React from 'react';
import { useForm } from 'react-hook-form';

function App() {
  const { register, handleSubmit, errors } = useForm(); // initialize the hook
  const onSubmit = (data) => {
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input name="firstname" ref={register} /> {/* register an input */}
      <input name="lastname" ref={register({ required: true })} />
      {errors.lastname && 'Last name is required.'}
      <input name="age" ref={register({ pattern: /\d+/ })} />
      {errors.age && 'Please enter number for age.'}
      <input type="submit" />
    </form>
  );
}