Email field

The EmailField component is a ready-to-use input for capturing and validating email addresses. It’s styled with Tailwind CSS and powered by Formik for smooth form handling and validation. Designed for flexibility and ease of use, it fits perfectly into login, sign-up, or contact forms. Clean, consistent, and fully customizable.

Email Field preview

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