Email field

In this tutorial, we will use Tailwind CSS and Formik to create the Email Field component. It will used a lot of in our forms like: Sign in form, sign up form, Contact us form, ...

1. Setup codes

Before add the EmailField, we need to add the TextField first, you can see in this link.

Create a new file components/common/forms/EmailField.tsx and add this code below

jsx
import React, { useEffect } from "react";

import { useFormikContext } from "formik";
import * as Yup from "yup";

import TextField from "./TextField";

type EmailFieldProps = {
  hideUserExistMess?: () => void;
  className?: string;
};

export const emailFieldValidation = Yup.string()
  .email("Please enter a valid email address")
  .required("Email address is required");

export default function EmailField({
  className,
  hideUserExistMess,
}: EmailFieldProps) {
  const { values } = useFormikContext<any>();

  useEffect(() => {
    hideUserExistMess && hideUserExistMess();
  }, [values.email]);

  return (
    <>
      <TextField
        id="email"
        name="email"
        label="Email address"
        className={className}
      />
    </>
  );
}

2. Usages

Because the EmailField component is built base on Formik, so we need to wrap the Formik and Form tags out site of EmailField component.

jsx
"use client";

import { Form, Formik } from "formik";

...

<Formik
  initialValues={{ email: "" }}
  validationSchema={validationSchema}
  onSubmit={(values) => alert(`Email is ${values.email}`)}
>
  <Form className="flex flex-col gap-4">
    <EmailField />
    ...
  </Form>
</Formik>

You can see all source code

jsx
"use client";

import { Form, Formik } from "formik";
import React from "react";
import * as Yup from "yup";

import Button from "@/components/Button";
import EmailField, { emailFieldValidation } from "@/components/Form/EmailField";

const validationSchema = Yup.object().shape({
  email: emailFieldValidation,
});

const TestingForm = () => {
  return (
    <div className="not-prose flex max-w-2xl flex-col gap-3 rounded-lg border-2 p-6">
      <p className="mb-4 text-3xl font-bold">Form with Email Field</p>
      <Formik
        initialValues={{ email: "" }}
        validationSchema={validationSchema}
        onSubmit={(values) => alert(`Email is ${values.email}`)}
      >
        <Form className="flex flex-col gap-4">
          <EmailField />
          <div>
            <Button type="submit" className="w-full">
              <span>
                Submit <span aria-hidden="true">&rarr;</span>
              </span>
            </Button>
          </div>
        </Form>
      </Formik>
    </div>
  );
};

export default TestingForm;

Learn more to using EmailField component in Signin, Signup forms on this link