Star

Builder

Build your own form with code and example.

Form

    You can start adding fields with Fields Creator ▸

    Input Creator

    Code

    
    import React from 'react';
    import useForm from 'react-hook-form';
    
    export default function Form() {
      const { register, handleSubmit, errors } = useForm();
      const onSubmit = data => console.log(data);
      console.log(errors);
      
      return (
        <form onSubmit={handleSubmit(onSubmit)}>
    
          <input type="submit" />
        </form>
      );
    }

    React Hook Form

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

    Features

    HTML standard

    Leverage your existing HTML markup, and start validating your forms with custom or browser built-in validation.

    Super Light

    Performance is important and packages size matters. it is a tiny library and without any dependencies.

    rounded

    Performance

    Minimizes the number of re-renders, striving to provide your users with the best experience.

    Adoptable

    Since form state is inherently local, it can be easily adopted without other dependencies.

    </> Library Code Comparison

    Reducing the amount of code that you have to write is one of the primary goals for React Hook Form. To illustrate that, let's look at a very simple form of validation among some of the most popular form validation libraries.

    React Hook Form

    import React from "react";
    import useForm from "react-hook-form";
    
    const Example = () => {
      const { handleSubmit, register, errors } = useForm();
      const onSubmit = values => {
        console.log(values);
      };
    
      return (
        <form onSubmit={handleSubmit(onSubmit)}>
          <input
            name="email"
            ref={register({
              required: 'Required',
              pattern: {
                value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i,
                message: "invalid email address"
              }
            })}
          />
          {errors.email && errors.email.message}
    
          <input
            name="username"
            ref={register({
              validate: value => value === "admin" || "Nice try!"
            })}
          />
          {errors.username && errors.username.message}
    
          <button type="submit">Submit</button>
        </form>
      );
    };
    

    Formik

    import React from "react";
    import { Formik, Form, Field } from "formik";
    
    function validateEmail(value) {
      let error;
      
      if (!value) {
        error = "Required";
      } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(value)) {
        error = "Invalid email address";
      }
      
      return error;
    }
    
    function validateUsername(value) {
      let error;
      
      if (value === "admin") {
        error = "Nice try!";
      }
      
      return error;
    }
    
    const Example = () => {
      const onSubmit = values => {
        console.log(values);
      };
    
      return (
        <Formik
          initialValues={{
            username: "",
            email: ""
          }}
          onSubmit={onSubmit}
        >
          {({ errors, touched }) => (
            <Form>
              <Field name="email" validate={validateEmail} />
              {errors.email && touched.email && errors.email}
    
              <Field name="username" validate={validateUsername} />
              {errors.username && touched.username && errors.username}
    
              <button type="submit">Submit</button>
            </Form>
          )}
        </Formik>
      );
    };
    

    Redux Form

    import React from "react";
    import { Provider } from "react-redux";
    import { Field, reduxForm } from "redux-form";
    import store from "./store";
    
    const validate = values => {
      const errors = {};
    
      if (!values.username) {
        errors.username = "Required";
      } else if (values.username.length !== "admin") {
        errors.username = "Nice try!";
      }
    
      if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(values.email)) {
        errors.email = "Invalid email address";
      }
    
      return errors;
    };
    
    const renderField = ({ input, label, type, meta: { touched, error } }) => (
      <>
        <input {...input} placeholder={label} type={type} />
        {touched && error && <span>{error}</span>}
      </>
    );
    
    const Form = props => {
      const { handleSubmit } = props;
      const onSubmit = values => {
        console.log(values);
      };
    
      return (
        <form onSubmit={handleSubmit(onSubmit)}>
          <Field name="email" type="email" component={renderField} label="Email" />
          <Field name="username" component={renderField} label="Username" />
        
          <button type="submit">Submit</button>
        </form>
      );
    };
    
    const FormRedux = reduxForm({ form: "syncValidation", validate })(Example);
    
    const Example = () => (
      <Provider store={store}>
        <Example/>
      </Provider>
    );
    

    Performance Comparison

    Do you ever wonder how many component re-renders have been triggered by the user?

    You can swipe through the following videos to see how they work.

    Total re-renders: 3

    Total re-renders: 30+

    Total re-renders: 30+

    The following results demonstrate: how long it took to render the components. Results are captured under 6x CPU slow down on App start with Chrome dev tools' performance tab, and code is from the section above 'Library Code Comparison'.

    React Hook Form

    • No. of mount(s): 1
    • No. of committing change(s): 1
    • Total time: 1800ms
    React Hook Form performance

    Formik

    • No. of mount(s): 6
    • No. of committing change(s): 1
    • Total time: 2070ms
    Formik performance

    Redux Form

    • No. of mount(s): 17
    • No. of committing change(s): 2
    • No. of update(s): 2
    • Total time: 2380ms
    Redux Form performance

    Want to see more intense performance tests? Check out the result of 1000 fields within a form here.

    Find it useful and interesting?

    Form validation should be much simpler with React Hook Form. It will lead you to write less code and have better performance. Check out the get started section and learn more on the API documentation page.

    Live Demo

    The following form demonstrates form validation in action. Each column represents what has been captured in the custom hook. You can also change fields in the form by clicking the EDIT button.

    Example

    or

    Errors

    ⓘ Press submit to trigger validation error.

    Watch

    ⓘ Change input value to see watched values.

    Touched

    ⓘ Touched fields will display here.

    []

    Submit

    ⓘ Successful submit values will display here.