React Hook Form 7 Custom Radio Buttons Tutorial

Last updated on: by Digamber

Learning React is not complicated; instead, it’s easy, but only when you have the right resources and guidance. We always diligently strive hard to bring you the latest and widely used profound React js tutorials.

If you have trouble implementing and using Radio buttons in React, fret not – this tutorial is exclusively for you.

We will try to answer how to build the radio buttons component in React with React Hook Form and Yup packages, including radio buttons validation. We will shed light on how to use bootstrap to create and design the radio buttons.

A radio button or option button is a graphical control element that grants users to select simply one of a predefined set of jointly particular options. It is one of the form component 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 3: Add React Hook Form and Yup Packages
  • Step 2: Add Bootstrap Library
  • Step 3: Create Radio Button Component
  • Step 4: Add Component in App Js
  • Step 5: Start Development Server

Prepare New React App

Go through this instruction only if you haven’t created the new React app.

If so, then we will use the create-react-app tool to form the new project.

npx create-react-app react-moon

Ensure that after installing the app, you have entered it into the project folder.

cd react-moon

Add React Hook Form and Yup Packages

This step shows you how to add React hook form the library. All you have to do is copy the offered command, paste it on the command-line tool, and don’t forget to hit enter.

npm install @hookform/resolvers

Similarly, use the given command to add yup library.

npm install yup

Add Bootstrap Library

We use the bootstrap library to spruce up the radio buttons, this ramps up the designing process.

Here is the command that needs to be fired up from the terminal window.

npm install bootstrap

Open the main component file, we are talking about App.js and diligently add the bootstrap’s node_modules path here.

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

Create Radio Button Component

Now, you are ready to create the radio buttons component, ensure that you are in the component/ directory, furthermore 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

Import the react hook form library; through this package, we will define the useForm module. This will help us set the form object; in this form, 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.

Add Component in App Js

Radio buttons are almost ready to be used, just get into the src/App.js.

Here in this file, you have to 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 />
    </>
  )
}

Start Development Server

Let us find out how does our intensive efforts look? In order to review the functionality, we have to start the react application and test the feature on the browser.

Here in the final step, you have to execute the following command with reverence.

npm start

Ideally, you can use the given url to test the radio buttons.

http://localhost:3000

React Hook Form 7 Custom Radio Buttons Tutorial

Conclusion

In this React Hook Form tutorial, we have gotten into the method of making Radio buttons in React. We touched every aspect that helps build the radio buttons component, from designing to validating.

We hope you will like the React radio buttons example.

Digamber

I am Digamber, a full-stack developer and fitness enthusiast. I crafted this site to bestow my coding experience and love to write on JavaScript, React, Angular, Vue, Laravel.