Sign-In Form

In this guide, you’ll learn how to create a clean, responsive, and reusable sign-in form using Formik and Tailwind CSS in a Next.js application. We’ll cover form validation, error handling, and styling for a seamless user experience.

Signin Form preview

1. Install lib and other components

You need setup some common UI components first:

• Button
• EmailField
• PasswordField
• AuthFormProviders

2. Add Signin Form component

Create a new file components/ui/forms/SigninForm.tsx

jsx
"use client";

import React from "react";

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

import Button from "@/components/ui/Button";

import AuthFormProviders from "./common/AuthFormProviders";
import EmailField, { emailFieldValidation } from "./common/EmailField";
import PasswordField, { passwordFieldValidation } from "./common/PasswordField";

interface SigninFormValues {
  email: string;
  password: string;
}

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

const SigninForm = () => {
  const initialValues: SigninFormValues = { email: "", password: "" };

  const handleSubmit = async (values: SigninFormValues) => {
    alert(values);
  };

  return (
    <div className="bg-white px-6 py-4 shadow sm:rounded-lg md:py-8">
      <Formik<SigninFormValues>
        initialValues={initialValues}
        validationSchema={validationSchema}
        onSubmit={handleSubmit}
      >
        <Form action="#" className="grid grid-cols-1 gap-y-4">
          <EmailField />
          <PasswordField />

          <div className="mt-2">
            <Button type="submit" className="w-full">
              <span>
                Sign in <span aria-hidden="true">&rarr;</span>
              </span>
            </Button>
          </div>

          <AuthFormProviders />
        </Form>
      </Formik>
    </div>
  );
};

export default SigninForm;

Now you can use the form in the app/(auth)/signin/page.tsx like that

jsx
import Link from "next/link";
import React from "react";

import SignInForm from "@/components/Form/AuthForms/SignInForm";
import { ROUTES } from "@/constants/routes";

const SigninForm = () => {
  return (
    <div className="not-prose">
      <div className="bg-white px-6 py-4 shadow sm:rounded-lg md:py-8">
        <h2 className="text-3xl font-bold text-gray-900">Sign in to your account</h2>
        <p className="mt-2 text-sm text-gray-700">
          Don’t have an account?{" "}
          <Link href={ROUTES.signUp} className="font-medium text-blue-600 hover:underline">
            Sign up
          </Link>{" "}
          for a free trial.
        </p>

        <SignInForm />
      </div>
    </div>
  );
};

export default SigninForm;

The UI will be shown