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

    Performance, 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 volume that is triggered re-rendering, try 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"
            type="text"
            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 wondering how many component re-render has been triggered by user?

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

    Total re-render: 3

    Total re-render: 30+

    Total re-render: 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: 1
    • No. of committing change: 1
    • Total time: 1800ms
    React Hook Form performance

    Formik

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

    Redux Form

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

    Wants to see more intense performance test? Check out the result for 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 having better performance. Checkout the get started section and learn more at API documentation page.

    Live Demo

    The following form demonstrates form validation in action. Each columns represent what's 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.