In this tutorial, I'll cover how to create a Material UI with React Hook Form - Validation with Error Messages. Scroll down to the end of the page to you can see the YouTube video(CodeAT21) and GitHub repository full source code available for this.

This react form is using the TextField, Radio, RadioGroup, FormControlLabel, FormControl, FormLabel, FormHelperText, FormGroup, Checkbox, and Button components from Material-UI. The elements we're adding are: five fields for the user to input their first name, last name, email, gender, I agree all terms and conditions and submit button.


First, we'll create the react project and install the two npm packages. In open your system terminal/command line enter the code below :

npx create-react-app form-validation
cd form-validation
npm install @mui/material @emotion/react @emotion/styled
npm install react-hook-form
npm start 

Next, Project structure your folder as follows.

├── App.css
├── App.js
├── index.css
└── index.js 

Next, open up the App.js file located in the src folder. You should see this:

import React from 'react'; import TextField from '@mui/material/TextField'; import './App.css'; import { Button, Radio, RadioGroup, FormControlLabel, FormControl, FormLabel, FormHelperText, FormGroup, Checkbox, } from '@mui/material'; import { useForm } from "react-hook-form"; const App = () => { const { register, handleSubmit, watch, formState: { errors } } = useForm(); const onSubmit = (data) => console.log(data); console.log(errors); return ( <div className="App__form"> <h1> Material UI with React Hook Form - Validation with Error Messages </h1> <form onSubmit={handleSubmit(onSubmit)}> <TextField id="outlined-basic" name="firstName" label="First Name" variant="outlined" fullWidth {...register("firstName", { required: "First Name is required." })} error={Boolean(errors.firstName)} helperText={errors.firstName?.message} /> <TextField id="outlined-basic" label="Last Name" variant="outlined" fullWidth name="lastName" {...register("lastName", { required: "Last Name is required." })} error={Boolean(errors.lastName)} helperText={errors.lastName?.message} /> <TextField id="outlined-basic" label="E-mail" variant="outlined" fullWidth name="email" {...register("email", { required: "E-mail Address is required." })} error={Boolean(} helperText={} /> {/* Radio button */} <FormControl error={Boolean(errors.gender)} > <FormLabel component="legend"> Choose Your Gender </FormLabel> <RadioGroup row aria-label="gender" name="gender"> <FormControlLabel value="female" control={ <Radio {...register("gender", { required: "Choose your gender" })} /> } label="Female" /> <FormControlLabel value="male" control={ <Radio {...register("gender", { required: "Choose your gender" })} /> } label="Male" /> <FormControlLabel value="other" control={ <Radio {...register("gender", { required: "Choose your gender" })} /> } label="Other" /> </RadioGroup> <FormHelperText style={{color:'#d32f2f'}}>{errors.gender?.message}</FormHelperText> </FormControl> <div className="clearfix"></div> {/* Check box */} <FormGroup error={Boolean(errors.tnc)} style={{ display: "block", marginTop: "17px" }} > <FormControlLabel control={ <Checkbox name="tnc" {...register("tnc", { required: "please aggre our terms and condtions" })} /> } label="I aggree all terms and conditions" /> </FormGroup> <FormHelperText style={{color:'#d32f2f'}}>{errors.tnc?.message}</FormHelperText> <div className="clearfix"></div> <Button variant="contained" color="primary" type="submit" className="btns"> create new account </Button> </form> </div> ) } export default App

Basic Form Creation Using react-hook-form

To get started with the react hook form library with npm install react-hook-form after import useForm Hook into app.js. React hook form some Key features and highlights are:

  • useForm: It is access to alternate methods from react hook library
  • register: This method is validation rules
  • handleSubmit: first pass data after the validation
  • errors: error message corresponding to input field
  • reset: form reset to all fields