Text field

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

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