react hook form

 import React from 'react'

import { useForm } from "react-hook-form";

import './Style/style.css';

export default function RF1() {

    const {

      register,

      formState: { errors,isSubmitting },

      handleSubmit,

     

      }

    = useForm();

    const onSubmit = async(data) =>{

      await new Promise((resolve)=>setTimeout(resolve,5000))

      console.log(data);

    }

  return (

    <div>

      <form  onSubmit={handleSubmit(onSubmit)} >

      <div>

      <label htmlFor="uname" ><b>Username</b></label>

      <input type="text" placeholder="Enter Username"

      className={ errors.uname?'input-error':''}

      {...register("uname",{ required: true, minLength:{ value:3,message:'Min len atleast 3'} })}/>

      {errors.uname&&<p>{errors.uname?.message}</p>}

      {errors.uname?.type === "required" && (

        <p role="alert" className='input-error'>First name is required</p>

      )}

      </div>

      <div>

      <label htmlFor="psw"><b>Password</b></label>

      <input type="password" placeholder="Enter Password"  {...register("upsw", { pattern: {value:/^[A-Za-z]+$/i,message:'missing pattern'} })}/>

      </div>

      {errors.upsw&&<p>{errors.upsw?.message}</p>}

     <div>

     <div>

     <select {...register("gender",{required:'Gender is required'})}>

     <option value="">select gender</option>

        <option value="female">female</option>

        <option value="male">male</option>

        <option value="other">other</option>

      </select>

      {errors.gender&&<p>{errors.gender?.message}</p>}

     </div>

      {isSubmitting}

     <input type="submit" disabled={isSubmitting} value={isSubmitting?'submitting':'submit'}/>

     </div>

     

      </form>

    </div>

  )

}