Name Field

The NameField component is a reusable input built on top of a common TextField. It includes built-in name validation using Yup, with form state managed by Formik. Tailwind CSS handles the styling to keep it clean and consistent.

Name Field preview

1. Setup codes

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

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

jsx
import React from "react";

import * as Yup from "yup";

import TextField from "./TextField";

type NameFieldProps = {
  id?: string;
  name?: string;
  label?: string;
};

export const nameFieldValidation = Yup.string()
  .required("Username Required")
  .min(3, "Username must be at least 3 characters")
  .max(20, "Username must not exceed 20 characters")
  .matches(
    /^[a-zA-Z0-9_ ]+$/,
    "Only letters, numbers, underscores and spaces are allowed",
  );

export default function NameField({ id, name, label }: NameFieldProps) {
  return (
    <>
      <TextField
        id={id || "name"}
        name={name || "name"}
        label={label || "User name"}
      />
    </>
  );
}

2. Usages

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

jsx
"use client";

import { Form, Formik } from "formik";

...

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

You can see the UI

You can see the full source codes

jsx
"use client";

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

import Button from "@/components/Button";
import NameField, { nameFieldValidation } from "@/components/Form/NameField";

const validationSchema = Yup.object().shape({
  name: nameFieldValidation,
});

const TestForm = () => {
  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 Name Field</p>
      <Formik
        initialValues={{ name: "" }}
        validationSchema={validationSchema}
        onSubmit={(values) => alert(`Name is ${values.name}`)}
      >
        <Form className="flex flex-col gap-4">
          <NameField />

          <div>
            <Button type="submit" className="w-full">
              <span>
                Submit <span aria-hidden="true">&rarr;</span>
              </span>
            </Button>
          </div>
        </Form>
      </Formik>
    </div>
  );
};

export default TestForm;

Learn more about using NameField component in Signin, Signup forms on this link