Text Field

The TextField component is a reusable input field designed for forms. It combines the power of Tailwind CSS for styling and Formik for form state management and validation. This component is built to be flexible, accessible, and easy to integrate into any React or Next.js project.

Whether you're building a simple login form or a complex multi-step workflow, TextField ensures consistent UI and seamless form handling out of the box.

Text Field preview

1. Setup codes

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

jsx
import React, { JSX, ReactNode } from "react";

import { useFormikContext } from "formik";

type TextFieldProps = {
  id: string;
  name: string;
  placeholder?: string;
  label?: string;
  autoComplete?: string;
  className?: string;
  type?: string;
};

export default function TextField({
  id,
  name,
  label = "",
  placeholder,
  autoComplete,
  className = "",
  type = "text",
  ...props
}: TextFieldProps & JSX.IntrinsicElements["input"]) {
  const { values, touched, errors, handleChange, handleBlur } =
    useFormikContext<any>();

  // Ensure error is rendered as a string or null
  const errorMessage =
    touched[name] && typeof errors[name] === "string" ? errors[name] : null;

  return (
    <div className={className}>
      {label && (
        <label
          htmlFor={id}
          className="mb-2 block text-sm/6 font-medium text-gray-900"
        >
          {label}
        </label>
      )}

      <div className="flex w-full flex-col">
        <input
          id={id}
          name={name}
          type={type}
          value={values[name]}
          onChange={handleChange}
          onBlur={handleBlur}
          placeholder={placeholder}
          autoComplete={autoComplete}
          className={`focus:border-primary focus:ring-primary block w-full appearance-none rounded-full border border-gray-200 bg-gray-50 px-3 py-2 text-gray-900 placeholder-gray-400 focus:bg-white focus:outline-none sm:text-sm`}
          {...props}
        />

        {touched[name] && errors[name] ? (
          <div className="text-system-error text-sm">
            {errorMessage as ReactNode}
          </div>
        ) : null}
      </div>
    </div>
  );
}

2. Usages

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

The TextField component has some important props: id, name, label and placeholder

jsx
"use client";

import { Form, Formik } from "formik";

...

<div className="not-prose flex max-w-2xl flex-col gap-3 rounded-lg border-2 p-6">
  <p className="text-3xl font-bold">Form</p>
  <Formik initialValues={{ name: "" }} onSubmit={() => console.log("Get in here")}>
    <Form>
      <TextField id="name" name="name" label="Name" placeholder="User name" />
    </Form>
  </Formik>
</div>

You can see the UI of TextField

You can see all the source code of the form

jsx
"use client";

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

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

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

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

          <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 TextField component in Signin, Signup forms on this link