
  Dynamic Forms Made Simple: Create and Validate Forms with React Hook Form and Yup
  
  
    Forms are an essential part of web development, used for everything from registration and user input to search queries and contact forms. However, creating and validating forms can be a tedious and error-prone task. In this tutorial, we’ll learn how to use React Hook Form and Yup to create and validate dynamic forms in a React application with ease. 
  

  What is React Hook Form?
  
  
    React Hook Form is a lightweight library for building performant and scalable forms in React. It provides a simple and intuitive API, allowing us to easily create and manage forms with minimal boilerplate code. React Hook Form uses uncontrolled components to reduce the number of rerenders and improve performance, as well as providing flexible and customizable validation rules and error messages.
  

  What is Yup?
  
  
    Yup is a JavaScript object schema validation library. It provides a simple and intuitive way to define validation rules for objects and their properties, including nested objects and arrays. Yup supports a wide range of validation types, including string, number, date, boolean, and more. It also allows us to create custom validation functions and error messages, making it easy to tailor our validation logic to our specific needs.
  

  Getting Started
  
  
    To follow along with this tutorial, you’ll need a basic understanding of React and JSX syntax. You’ll also need to have Node.js and npm installed on your system. If you haven’t already, you can create a new React app using npx create-react-app my-app, then navigate to the app directory with cd my-app.
  
  
  
    First, we’ll need to install React Hook Form and Yup as dependencies. Open a terminal window and run the following command:
  
  
  
    
      npm install react-hook-form yup
    
  

  Creating a Simple Form
  
  
    Let’s start by creating a simple registration form with two fields: email and password. We’ll begin by importing the necessary dependencies and creating our form element using React Hook Form:
  

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

      function RegistrationForm() {
        const { register, handleSubmit } = useForm();

        const onSubmit = (data) => {
          console.log(data);
        };

        return (
          &lt;form onSubmit={handleSubmit(onSubmit)}>
            &lt;label htmlFor="email">Email&lt;/label>
            &lt;input id="email" name="email" type="text" ref={register} />

            &lt;label htmlFor="password">Password&lt;/label>
            &lt;input id="password" name="password" type="password" ref={register} />

            &lt;button type="submit">Submit&lt;/button>
          &lt;/form>
        );
      }

      export default RegistrationForm;
    
  

  
    Here we’ve imported the useForm() hook from React Hook Form and called it to create our form component. We’ve also defined an onSubmit() function that will log the form data to the console when the form is submitted. Notice that we’re using the ref callback to register our input elements with React Hook Form. This allows the library to manage the state and validation of our form inputs.
  
  
  
    Our form currently has no validation rules, meaning that the user can submit it with empty or invalid input values. Let’s add some validation to our form using Yup.
  

  Adding Validation Rules with Yup

  
    To use Yup with React Hook Form, we need to create a schema validation object using Yup’s API, then pass it to the useForm() hook as an option. Let’s create a new file named validationSchema.js in our project root directory and define our validation schema for our form:
  

  
    
      import * as yup from 'yup';

      const validationSchema = yup.object().shape({
        email: yup.string().email('Invalid email').required('Email is required'),
        password: yup.string().min(6, 'Password must be at least 6 characters').required('Password is required'),
      });

      export default validationSchema;
    
  

  
    Here we’ve imported Yup and defined a schema using its API. The schema specifies that the email field must be a valid email address and cannot be empty, and that the password field must be at least 6 characters long and cannot be empty. We’ve also defined custom error messages for each validation rule.
  

  
    Let’s import our validation schema into our registration form component and pass it to the useForm() hook as an option:
  

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

      function RegistrationForm() {
        const { register, handleSubmit, errors } = useForm({
          validationSchema,
        });

        const onSubmit = (data) => {
          console.log(data);
        };

        return (
          &lt;form onSubmit={handleSubmit(onSubmit)}>
            &lt;label htmlFor="email">Email&lt;/label>
            &lt;input id="email" name="email" type="text" ref={register} />
            {errors.email && &lt;p>{errors.email.message}&lt;/p>}

            &lt;label htmlFor="password">Password&lt;/label>
            &lt;input id="password" name="password" type="password" ref={register} />
            {errors.password && &lt;p>{errors.password.message}&lt;/p>}

            &lt;button type="submit">Submit&lt;/button>
          &lt;/form>
        );
      }

      export default RegistrationForm;
    
  

  
    Here we’ve passed our validation schema as an option to the useForm() hook. We’ve also destructured the errors object from the hook, which contains any validation errors for our form inputs. We’ve used the &amp;&amp; operator to conditionally render error messages below our input elements if the corresponding validation rule has failed. 
  

  
    Now if we try to submit our form with empty or invalid input values, we’ll see real-time error messages displayed below each input field. If all validation rules pass, our onSubmit() function will be called and the form data will be logged to the console.
  

  Creating Custom Input Components
  
  
    So far we’ve been using standard HTML input elements to create our form. While this is perfectly fine for simple forms, for more complex forms with custom styling or functionality, it may be beneficial to create custom input components instead. Let’s see how we can use React Hook Form with custom input components.
  

  
    First, let’s create a new custom input component for our email field. In the same directory as our registration form component, create a new file named EmailInput.js and define our custom input component:
  

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

      function EmailInput({ name, control, rules }) {
        const { field, fieldState } = useController({
          name,
          control,
          rules,
        });

        return (
          &lt;div>
            &lt;label htmlFor={name}>Email&lt;/label>
            &lt;input id={name} {...field} />

            {fieldState.error && &lt;p>{fieldState.error.message}&lt;/p>}
          &lt;/div>
        );
      }

      export default EmailInput;
    
  

  
    Here we’ve imported the useController() hook from React Hook Form and used it to create our custom input component. Inside the component, we’ve defined a field object containing our input element’s props and a fieldState object containing any validation errors for our input. We’ve also passed our input’s name, control (from useForm()), and validation rules to the useController() hook. Notice that we’re using {...field} to spread the field object’s props onto our input element, allowing us to pass values like name, id, and type without having to define them manually.
  

  
    Let’s import our custom input component into our registration form component and use it in place of our standard email input:
  

  
    
      import React from 'react';
      import { useForm } from 'react-hook-form';
      import validationSchema from './validationSchema';
      import EmailInput from './EmailInput';

      function RegistrationForm() {
        const { control, handleSubmit, formState: { errors } } = useForm({
          validationSchema,
        });

        const onSubmit = (data) => {
          console.log(data);
        };

        return (
          &lt;form onSubmit={handleSubmit(onSubmit)}>
            &lt;EmailInput name="email" control={control} rules={{required: 'Email is required', pattern: {value: /^\\S+@\\S+$/i, message: 'Invalid email'}}} />
            {errors.email && &lt;p>{errors.email.message}&lt;/p>}

            &lt;label htmlFor="password">Password&lt;/label>
            &lt;input id="password" name="password" type="password" ref={register} />
            {errors.password && &lt;p>{errors.password.message}&lt;/p>}

            &lt;button type="submit">Submit&lt;/button>
          &lt;/form>
        );
      }

      export default RegistrationForm;
    
  

  
    Here we’ve imported our custom input component and used it in place of our standard email input. Notice that we’re passing a new rules prop to our input component, which specifies that the email field is required and must match a regular expression for a valid email address. We’ve also abstracted the name, control, and rules props into a reusable component that can be used in other forms throughout our app.
  

  Conclusion
  
  
    With React Hook Form and Yup, creating and validating dynamic forms in a React application has never been easier. We’ve shown how to create and customize form inputs, add validation rules and error messages, and use external validation schema objects to manage complex form validation. By using these two powerful libraries together, we can streamline our form development process and create more robust and user-friendly forms with less code.
  



<div>
  <h1>Dynamic Forms Made Simple: Create and Validate Forms with React Hook Form and Yup</h1>
  
  <p>
    Forms are an essential part of web development, used for everything from registration and user input to search queries and contact forms. However, creating and validating forms can be a tedious and error-prone task. In this tutorial, we’ll learn how to use <strong>React Hook Form</strong> and <strong>Yup</strong> to create and validate dynamic forms in a React application with ease. 
  </p>

  <h2>What is React Hook Form?</h2>
  
  <p>
    <strong>React Hook Form</strong> is a lightweight library for building performant and scalable forms in React. It provides a simple and intuitive API, allowing us to easily create and manage forms with minimal boilerplate code. React Hook Form uses uncontrolled components to reduce the number of rerenders and improve performance, as well as providing flexible and customizable validation rules and error messages.
  </p>

  <h2>What is Yup?</h2>
  
  <p>
    <strong>Yup</strong> is a JavaScript object schema validation library. It provides a simple and intuitive way to define validation rules for objects and their properties, including nested objects and arrays. Yup supports a wide range of validation types, including string, number, date, boolean, and more. It also allows us to create custom validation functions and error messages, making it easy to tailor our validation logic to our specific needs.
  </p>

  <h2>Getting Started</h2>
  
  <p>
    To follow along with this tutorial, you’ll need a basic understanding of React and JSX syntax. You’ll also need to have <strong>Node.js</strong> and <strong>npm</strong> installed on your system. If you haven’t already, you can create a new React app using <code>npx create-react-app my-app</code>, then navigate to the app directory with <code>cd my-app</code>.
  </p>
  
  <p>
    First, we’ll need to install React Hook Form and Yup as dependencies. Open a terminal window and run the following command:
  </p>
  
  <pre>
    <code>
      npm install react-hook-form yup
    </code>
  </pre>

  <h2>Creating a Simple Form</h2>
  
  <p>
    Let’s start by creating a simple registration form with two fields: email and password. We’ll begin by importing the necessary dependencies and creating our form element using React Hook Form:
  </p>

  <pre>
    <code>
      import React from 'react';
      import { useForm } from 'react-hook-form';

      function RegistrationForm() {
        const { register, handleSubmit } = useForm();

        const onSubmit = (data) => {
          console.log(data);
        };

        return (
          &lt;form onSubmit={handleSubmit(onSubmit)}>
            &lt;label htmlFor="email">Email&lt;/label>
            &lt;input id="email" name="email" type="text" ref={register} />

            &lt;label htmlFor="password">Password&lt;/label>
            &lt;input id="password" name="password" type="password" ref={register} />

            &lt;button type="submit">Submit&lt;/button>
          &lt;/form>
        );
      }

      export default RegistrationForm;
    </code>
  </pre>

  <p>
    Here we’ve imported the <code>useForm()</code> hook from React Hook Form and called it to create our form component. We’ve also defined an <code>onSubmit()</code> function that will log the form data to the console when the form is submitted. Notice that we’re using the <code>ref</code> callback to register our input elements with React Hook Form. This allows the library to manage the state and validation of our form inputs.
  </p>
  
  <p>
    Our form currently has no validation rules, meaning that the user can submit it with empty or invalid input values. Let’s add some validation to our form using Yup.
  </p>

  <h2>Adding Validation Rules with Yup</h2>

  <p>
    To use Yup with React Hook Form, we need to create a schema validation object using Yup’s API, then pass it to the <code>useForm()</code> hook as an option. Let’s create a new file named <code>validationSchema.js</code> in our project root directory and define our validation schema for our form:
  </p>

  <pre>
    <code>
      import * as yup from 'yup';

      const validationSchema = yup.object().shape({
        email: yup.string().email('Invalid email').required('Email is required'),
        password: yup.string().min(6, 'Password must be at least 6 characters').required('Password is required'),
      });

      export default validationSchema;
    </code>
  </pre>

  <p>
    Here we’ve imported Yup and defined a schema using its API. The schema specifies that the email field must be a valid email address and cannot be empty, and that the password field must be at least 6 characters long and cannot be empty. We’ve also defined custom error messages for each validation rule.
  </p>

  <p>
    Let’s import our validation schema into our registration form component and pass it to the <code>useForm()</code> hook as an option:
  </p>

  <pre>
    <code>
      import React from 'react';
      import { useForm } from 'react-hook-form';
      import validationSchema from './validationSchema';

      function RegistrationForm() {
        const { register, handleSubmit, errors } = useForm({
          validationSchema,
        });

        const onSubmit = (data) => {
          console.log(data);
        };

        return (
          &lt;form onSubmit={handleSubmit(onSubmit)}>
            &lt;label htmlFor="email">Email&lt;/label>
            &lt;input id="email" name="email" type="text" ref={register} />
            {errors.email && &lt;p>{errors.email.message}&lt;/p>}

            &lt;label htmlFor="password">Password&lt;/label>
            &lt;input id="password" name="password" type="password" ref={register} />
            {errors.password && &lt;p>{errors.password.message}&lt;/p>}

            &lt;button type="submit">Submit&lt;/button>
          &lt;/form>
        );
      }

      export default RegistrationForm;
    </code>
  </pre>

  <p>
    Here we’ve passed our validation schema as an option to the <code>useForm()</code> hook. We’ve also destructured the <code>errors</code> object from the hook, which contains any validation errors for our form inputs. We’ve used the <code>&amp;&amp;</code> operator to conditionally render error messages below our input elements if the corresponding validation rule has failed. 
  </p>

  <p>
    Now if we try to submit our form with empty or invalid input values, we’ll see real-time error messages displayed below each input field. If all validation rules pass, our <code>onSubmit()</code> function will be called and the form data will be logged to the console.
  </p>

  <h2>Creating Custom Input Components</h2>
  
  <p>
    So far we’ve been using standard HTML input elements to create our form. While this is perfectly fine for simple forms, for more complex forms with custom styling or functionality, it may be beneficial to create custom input components instead. Let’s see how we can use React Hook Form with custom input components.
  </p>

  <p>
    First, let’s create a new custom input component for our email field. In the same directory as our registration form component, create a new file named <code>EmailInput.js</code> and define our custom input component:
  </p>

  <pre>
    <code>
      import React from 'react';
      import { useController } from 'react-hook-form';

      function EmailInput({ name, control, rules }) {
        const { field, fieldState } = useController({
          name,
          control,
          rules,
        });

        return (
          &lt;div>
            &lt;label htmlFor={name}>Email&lt;/label>
            &lt;input id={name} {...field} />

            {fieldState.error && &lt;p>{fieldState.error.message}&lt;/p>}
          &lt;/div>
        );
      }

      export default EmailInput;
    </code>
  </pre>

  <p>
    Here we’ve imported the <code>useController()</code> hook from React Hook Form and used it to create our custom input component. Inside the component, we’ve defined a <code>field</code> object containing our input element’s props and a <code>fieldState</code> object containing any validation errors for our input. We’ve also passed our input’s name, control (from <code>useForm()</code>), and validation rules to the <code>useController()</code> hook. Notice that we’re using <code>{...field}</code> to spread the <code>field</code> object’s props onto our input element, allowing us to pass values like <code>name</code>, <code>id</code>, and <code>type</code> without having to define them manually.
  </p>

  <p>
    Let’s import our custom input component into our registration form component and use it in place of our standard email input:
  </p>

  <pre>
    <code>
      import React from 'react';
      import { useForm } from 'react-hook-form';
      import validationSchema from './validationSchema';
      import EmailInput from './EmailInput';

      function RegistrationForm() {
        const { control, handleSubmit, formState: { errors } } = useForm({
          validationSchema,
        });

        const onSubmit = (data) => {
          console.log(data);
        };

        return (
          &lt;form onSubmit={handleSubmit(onSubmit)}>
            &lt;EmailInput name="email" control={control} rules={{required: 'Email is required', pattern: {value: /^\\S+@\\S+$/i, message: 'Invalid email'}}} />
            {errors.email && &lt;p>{errors.email.message}&lt;/p>}

            &lt;label htmlFor="password">Password&lt;/label>
            &lt;input id="password" name="password" type="password" ref={register} />
            {errors.password && &lt;p>{errors.password.message}&lt;/p>}

            &lt;button type="submit">Submit&lt;/button>
          &lt;/form>
        );
      }

      export default RegistrationForm;
    </code>
  </pre>

  <p>
    Here we’ve imported our custom input component and used it in place of our standard email input. Notice that we’re passing a new <code>rules</code> prop to our input component, which specifies that the email field is required and must match a regular expression for a valid email address. We’ve also abstracted the <code>name</code>, <code>control</code>, and <code>rules</code> props into a reusable component that can be used in other forms throughout our app.
  </p>

  <h2>Conclusion</h2>
  
  <p>
    With React Hook Form and Yup, creating and validating dynamic forms in a React application has never been easier. We’ve shown how to create and customize form inputs, add validation rules and error messages, and use external validation schema objects to manage complex form validation. By using these two powerful libraries together, we can streamline our form development process and create more robust and user-friendly forms with less code.
  </p>

</div>

Learn how to create and validate dynamic forms in a React application with React Hook Form and the Yup schema validation library. Implement custom input components, reusable validation functions, and display real-time error messages for a better user experience.