React Formik HTML Form

This React HTML Form Build by the help of Formik library...


So You Need 1st to install this library : npm install formik
After that 2nd install library : npm install yup

And add bellow CSS also

import React from 'react';
import './Formik.css'
import { Formik, Form, Field, ErrorMessage } from 'formik';
import * as Yup from 'yup';
 
const Formik_v2 = () => {
 
    // for formik property Object
    const initialValues = {
        userName: '',
        userEmail: '',
        userPhone: '',
    }
 
    // for formik method ot Submit
    const onSubmit = values => {
        console.log('onSubmit Method ==> ', values);
    }
 
    // use Yup library for validation...
    const validationSchema = Yup.object({
        userName: Yup.string().required('Required!'),
        userEmail: Yup.string()
            .email('Invalid Email Address')
            .required('Required!'),
        userPhone: Yup.string().required('Required!')
    });
 
    // #########################################################################
    // JSX || UI area 
    // #########################################################################
    
     return (
        <div className="formikForm">
 
            <Formik
                initialValues={initialValues}
                validationSchema={validationSchema}
                onSubmit={onSubmit}>
 
                <Form>
                    <div className="form_control">
                        <label htmlFor="">Name</label>
                        <Field
                            type="text"
                            name="userName"
                            className="user_inputs" />
                        <ErrorMessage name='userName' />
                    </div>
 
                    <div className="form_control">
                        <label htmlFor="">E-mail</label>
                        <Field
                            type="email"
                            name="userEmail"
                            className="user_inputs" />
                        <ErrorMessage name='userEmail' />
                    </div>
 
                    <div className="form_control">
                        <label htmlFor="">Phone</label>
                        <Field
                            type="phone"
                            name="userPhone"
                            className="user_inputs" />
                        <ErrorMessage name='userPhone' />
                    </div>
                    <button type="submit">Submit</button>
                </Form>
            </Formik>
        </div>
    );
};
 
export default Formik_v2;

.formikForm {
    margin-top     : 20px;
    display        : flex;
    justify-content: center;
    font-size      : 2em;
    font-family    : 'Lucida Sans';
}
 
label {
    display: flex;
}
 
.user_inputs {
    display      : block;
    width        : 300px;
    padding      : 5px 10px;
    line-height  : 1.4;
    font-size    : 22px;
    outline      : none;
    border-radius: 5px;
    border       : .1px dashed black;
}
 
button {
    cursor       : pointer;
    padding      : 10px 20px;
    font-size    : 22px;
    border-radius: 5px;
    border       : .1px solid black;
 
}
 
.form_control {
    margin-bottom: 15px;
}
 
.error {
    color    : red;
    font-size: .7em;
}