How to Create Radio Buttons in using React Hook Form 7

React radio buttons validation tutorial; React hook form is a boon for web application development in React; it offers refrains from re-rendering the component repeatedly.

It additionally encompasses uncontrolled form validation that leads to better form handling. Not only but also quantifies the performance of the React app.

In this quick tutorial, we will learn how to create radio buttons in React application. We will use the React Hook Form package in React app, and you will find out how to gracefully use the React hook form module to build the form with Radio Buttons form element.

A radio button or option button is a GUI control element that enables the user to select only one of a pre-planned set of commonly exclusive options.

React Hook Form Build and Validate Radio Buttons Example

  • Step 1: Install React Project
  • Step 2: Install Bootstrap
  • Step 3: Install React Hook Form Library
  • Step 3: Incorporate Form Component
  • Step 4: Setting Up App Js
  • Step 5: Invoke React Server

Install React Project

We don’t think we need to teach you how to set up a new react app, but if you don’t know, then don’t worry.

Here is the simple command that creates a new project within a few minutes.

npx create-react-app react-form

You have to go inside the project folder after that.

cd react-form

Install Bootstrap

Bootstrap is one of the best creation in the user interface domain.

When it comes to creating beautiful UI, this probably saves a ton of time.

Accordingly, type and execute the provided command to install the package.

npm install bootstrap

Install React Hook Form

React hook form package will be added to our react application; if you are on to the command-line tool, type the suggested command.

After that, hit enter to let the package be added.

npm install @hookform/resolvers
npm install yup

Incorporate Form Component

Let us know the process of creating a new component, and this practice is considered best for adding subsequent features in react app.

Head over to component/ folder, ensure that you create the RadioButton.js file inside of it.

Here is the code example, that has to be added into RadioButton.js file.

import React from 'react'
import { useForm } from 'react-hook-form'
import * as Yup from 'yup'

export default function RadioButton() {
  const schema = Yup
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm()

  const onSubmit = (data) => console.log(data)

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <p>I love:</p>
      <div className="form-check">
        <label htmlFor="ted-lasso">
          <input
            {...register('favShow', { required: true })}
            type="radio"
            name="favShow"
            value="Ted Lasso"
            className="form-check-input"
            id="ted-lasso"
          />{' '}
          Ted Lasso
        </label>
      </div>

      <div className="form-check">
        <label htmlFor="got">
          <input
            {...register('favShow', { required: true })}
            type="radio"
            name="favShow"
            value="GOT"
            className="form-check-input"
            id="got"
          />{' '}
          GOT
        </label>
      </div>

      <div className="form-check">
        <label htmlFor="breadking-bad">
          <input
            {...register('favShow', { required: true })}
            type="radio"
            name="favShow"
            value="Breaking Bad"
            className="form-check-input"
            id="breadking-bad"
          />
          Breaking Bad
        </label>
      </div>

      <div className="text-danger mt-2">
        {errors.favShow?.type === 'required' && 'Value is required'}
      </div>

      <button type="submit" className="btn btn-primary mt-3">
        Submit
      </button>
    </form>
  )
}

Setting Up App Js

The app js is the main component of React, all the new components you create should go into src/App.js file.

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

export default function App() {
  return (
    <div className="container mt-4">
      <RadioButton />
    </div>
  )
}

Invoke React Server

Being an enthusiastic developer, whenever we learn or create something new, we become excited to test it out.

It gives us a positive gratification that keeps us motivated to learn new things.

Go ahead and get the same happiness by starting the react app using the given command.

npm start

How to Create Radio Buttons in using React Hook Form 7

Summary

We harness the true power of React Hook Form to deal with radio buttons in this tutorial. You have diligently built the radio button component with the useForm() object.

This tutorial is suitable for those looking for performance enhancement in React app development concerning form development.

We reckon this guide will show you the best path.