React Tutorial- Hook Form 7 Custom Radio Buttons

React Hook Form 7 Custom Radio Buttons Tutorial

Developing React apps is not a very difficult task. It becomes quite easy when we get some precise knowledge of how to add or implement different elements in React applications. The tools are quite handy and are known for being SEO-friendly.

So, in every React tutorial, we try our best to give comprehensive as well as step-by-step guidance on how to execute these useful benefits in React apps.

Throughout this guide also, we will get to know how to implement and use Radio buttons in React. We will see to build the Radio buttons component in React with React Hook Form and Yup packages, including Radio Buttons validation.

We will use Bootstrap to create and design the Radio Buttons.

 

Hope that you already know what’s a Radio Button?

A Radio Button or Option Button is a graphical control element that offers the user to select simply one of a predefined set of jointly particular options. It is one of the form components that permits you to grab information from the users.

 

How To Add And Use Radio Buttons Using React Hook Form

Step 1- Prepare New React App

Step 2- Add React Hook Form And Yup Packages

Step 3- Add Bootstrap Library

Step 4- Create Radio Button Component

Step 5- Add Component In App Js

Step 6- Start Development Server

 

Let’s learn in detail:

Step 1- Prepare New React App

Here, in this step, we have to create the new React app. We will use the create-react-app tool to do so:

npx create-react-app react-moon

Then, we have to enter into the project folder after installing the app:

cd react-moon

 

Step 2- Add React Hook Form And Yup Packages

In this step, we are going to learn how to add React Hook Form the library. All we have to do is to copy the given command which would be pasted on the command-line tool, then, hit enter:

npm install @hookform/resolvers

Likewise, we would use the following command to add the Yup library:

npm install yup

 

Step 3- Add Bootstrap Library

We use the Bootstrap library to spruce up the Radio buttons. This ramps up the designing process.

The following command has to be processed from the terminal window:

npm install bootstrap

Now, we need to open the main component file. Then, we will add the bootstrap’s node_modules path here:

import 'bootstrap/dist/css/bootstrap.min.css'

 

Step 4- Create Radio Button Component

By here, we are ready to create the Radio Buttons component. Do remember to be in the component/ directory where we make the CustomRadioButton.js file:

import React from 'react'
import * as Yup from 'yup'
import { useForm } from 'react-hook-form'
function CustomRadioButton() {
  const schema = Yup
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm()
  const onRBSubmit = (res) => console.log(res)
  return (
    <div className="container mt-5">
      <form onSubmit={handleSubmit(onRBSubmit)}>
        <h2>React Hook Form Radio Buttons Example</h2>
        <div className="form-check mt-3">
          <label htmlFor="pizza">
            <input
              {...register('food', { required: true })}
              type="radio"
              name="food"
              value="Pizza"
              className="form-check-input"
              id="pizza"
            />{' '}
            Pizza
          </label>
        </div>
        <div className="form-check">
          <label htmlFor="burger">
            <input
              {...register('food', { required: true })}
              type="radio"
              name="food"
              value="Burger"
              className="form-check-input"
              id="burger"
            />{' '}
            Burger
          </label>
        </div>
        <div className="form-check">
          <label htmlFor="fries">
            <input
              {...register('food', { required: true })}
              type="radio"
              name="food"
              value="Fries"
              className="form-check-input"
              id="fries"
            />
            French Fries
          </label>
        </div>
        <div className="text-danger mt-3">
          {errors.food?.type === 'required' &&
            'Tell us what is your favourite food.'}
        </div>
        <button type="submit" className="btn btn-dark mt-4">
          Tell Us
        </button>
      </form>
    </div>
  )
}
export default CustomRadioButton

 

Now, we import the React Hook Form library. Through this package, we will define the useForm module. This will also help us set the form object. In this form, we would create the Radio Buttons using the Bootstrap Library.

Bootstrap Library allows us to design the Radio Buttons whereas the register() method enables us to formulate the Radio Buttons.

 

Step 5- Add Component In App Js

Here, the Radio Buttons are almost ready to use for which we need to get into the src/App.js.

So, in this file, we will register the Radio Button component:

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

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

 

Step 6- Start Development Server

Since we have reached the last step of this tutorial, we need to review the functionality. So, we have to execute the following command with reverence:

npm start

 

Conclusion

In this React guide, we have learned the method of making Radio Buttons In React. We have seen every aspect that helps build the Radio Buttons component, from design to validation.

 

Thanks

Leave a Reply

Your email address will not be published. Required fields are marked *