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