React Tutorial- Hook Form 7 Required Checkbox Validation

Friends, in this tutorial, we will see that if we are using React Hook Form library, then creating Checkboxes in React becomes quite easy.

We will also get to learn how to include required validation in React checkboxes components. We will learn everything step by step from integration to validation in a simple manner.

We will have to use the useForm module for building the checkbox module. Also, we will use Yup and yupResolver modules for implementing the required validation.

How To Add Required Checkbox Validation And Show Message In React

Step 1- Download New Project

Step 2- Add Bootstrap UI Package

Step 3- Install Yup And Hook Form Libraries

Step 4- Build Hook Form Checkbox Component

Step 5- Register Module In App Js

Step 6- Run Development Server

Now, let’s learn in detail:

Step 1- Download New Project

The very first step is just to install the new React project.

We will open the terminal where we have to type the command and hit enter in order to begin the installation:

npx create-react-app react-gem

Here, we will move into the project folder:

cd react-gem

Step 2- Add Bootstrap UI Package

In the second step, we just have to add the bootstrap UI design package in the React app.

We have to remember to execute the following command through the terminal:

npm install bootstrap

Step 3- Install Yup And Hook Form Libraries

We will have to install a couple of packages for setting up the checkboxes in the React form. These packages are Hook Form and Yup scheme validation.

So, the below command will be invoked to install both the libraries:

npm install @hookform/resolvers yup

Step 4- Build Hook Form Checkbox Component

Afterward, we will enter into the component/ directory where we have to make the new file. This will be named CustomCheckbox.js.

Now, we have to paste the following code into the CustomCheckbox.js file:

import React from 'react'
import * as Yup from 'yup'
import { useForm } from 'react-hook-form'
import { yupResolver } from '@hookform/resolvers/yup'


export default function CustomCheckbox() {
  const validation = Yup.object().shape({
    chooseCb: Yup.bool().oneOf([true], 'Checkbox selection is required'),
  })

  const optionsForm = { resolver: yupResolver(validation) }

  const { register, handleSubmit, reset, formState } = useForm(optionsForm)
  const { errors } = formState

  function onCbFormSubmit(data) {
    console.log(JSON.stringify(data, null, 4))
    return false
  }

  return (
    <div className="container mt-3">
      <h2>Required Make Checkbox in React Example</h2>

      <form onSubmit={handleSubmit(onCbFormSubmit)}>
        <div className="form-group">
          <div className="form-check">
            <input
              type="checkbox"
              name="selectCheckbox"
              id="selectCheckbox"
              {...register('chooseCb')}
              className={`form-check-input ${
                errors.chooseCb ? 'is-invalid' : ''
              }`}
            />

            <label htmlFor="chooseCb" className="form-check-label">
              Are you sure?
            </label>

            <div className="invalid-feedback">{errors.chooseCb?.message}</div>
          </div>
        </div>
        <div className="mt-3">
          <button type="submit" className="btn btn-dark">
            Send
          </button>
        </div>
      </form>
    </div>
  )
}

Step 5- Register Module In App Js

Now, we will move on to App.js file. We have to register the checkbox module in this file.

Next, we have to execute the given code into the file:

import React from 'react'
import CustomCheckbox from './components/CustomCheckbox'
import 'bootstrap/dist/css/bootstrap.min.css'


export default function App() {
  return (
    <>
      <CustomCheckbox />
    </>
  )
}

Step 6- Run Development Server

Since we have reached the final step, we will be running the app’s development server:

npm start

Conclusion

So, we have learned that a checkbox is a simple UI element. Checked or unchecked refers to activated or unactivated.

With the help of this, the user can select either or multiple options from limited options.

Hope that you have easily understood how to create and incorporate required validation in the Checkbox within the React app.

Thanks