FormInput

Basic

Preview

Email

Code

<FormInput label="Email" placeholder="Email" />

Validation

Value missing

Preview

Email*

Email*

Code

<FormInput required label="Email" placeholder="Focus on me, and then blur" />

<FormInput
  required
  validationMessage={{
    valueMissing: "This is a custom `valueMissing` message",
  }}
  label="Email"
  placeholder="Focus on me, and then blur"
/>

Type mismatch

Preview

Email

Code

<FormInput
  label="Email"
  type="email"
  placeholder="Input an invalid email, e.g, abc"
  validationMessage={{
    typeMismatch: "Invalid email",
  }}
/>

Pattern mismatch

Preview

Chinese Name

Code

<FormInput
  label="Chinese Name"
  pattern="[\u4e00-\u9fa5]*"
  placeholder="Input an invalid name, e.g, Yulei"
  validationMessage={{
    patternMismatch: "Invalid Chinese name",
  }}
/>

Length limit

Preview

Password

Code

<FormInput
  label="Password"
  type="password"
  minLength={6}
  maxLength={20}
  placeholder="The length of your password should between 6 to 20"
  validationMessage={{
    tooShort: "Too short",
  }}
/>

Range underflow/overflow

Preview

Quantity

Code

<FormInput
  label="Quantity"
  type="number"
  min={1}
  max={5}
  placeholder="Quantity (between 1 and 5)"
  validationMessage={{
    rangeUnderflow: 'The minimum number is 1',
    rangeOverflow:'The maximum number is 5'
  }}
/>

API-calling validation

Preview

Email

Code

import { useRef, useState } from "react";
import FormInput, { type InputImperativeHandle } from "@/ui/FormInput";

const ApiCallingValidation = () => {
  const inputRef = useRef<InputImperativeHandle>(null);
  const [isCheckingEmail, setIsCheckingEmail] = useState(false);

  const handleBlurEmail = async (email: string) => {
    if (!email) return;

    setIsCheckingEmail(true);
    // Mock request
    setTimeout(() => {
      // Suppose request failed since the email is already used
      setIsCheckingEmail(false);
      inputRef.current?.setErrorMessage("This email address is already used");
    }, 3000);
  };

  return (
    <FormInput
      ref={inputRef}
      label="Email"
      placeholder="Input an email, then blur"
      loading={isCheckingEmail}
      onBlur={(e) => handleBlurEmail(e.currentTarget.value)}
    />
  );
};

export default ApiCallingValidation;

Controlled

Preview

Email

Email:

Email

Email: deafult@gamil.com

Code

import { useState } from "react";
import FormInput from "@/ui/FormInput";

const Controlled = () => {
  const [email1, setEmail1] = useState("");
  const [email2, setEmail2] = useState("deafult@gamil.com");

  return (
    <div className="flex flex-col gap-6">
      <div>
        <FormInput
          label="Email"
          placeholder="Email"
          value={email1}
          onChange={(e) => setEmail1(e.target.value)}
        />
        <p>Email: {email1}</p>
      </div>

      <div>
        <FormInput
          label="Email"
          placeholder="Email"
          value={email2}
          onChange={(e) => setEmail2(e.target.value)}
        />
        <p>Email: {email2}</p>
      </div>
    </div>
  );
};

export default Controlled;

Uncontrolled (with <form>)

Preview

Email*

Password*

Click here to submit (or press "Enter")

formDataObj:

Code

import { useState, type FormEventHandler } from "react";
import FormInput from "@/ui/FormInput";

const Uncontrolled = () => {
  const [formDataObj, setFormDataObj] =
    useState<Record<string, FormDataEntryValue>>();

  const handleSubmit: FormEventHandler<HTMLFormElement> = (event) => {
    event.preventDefault();

    const formData = new FormData(event.currentTarget);
    const updates = Object.fromEntries(formData);

    setFormDataObj(updates);
  };

  return (
    <form onSubmit={handleSubmit} className="flex flex-col gap-6">
      <FormInput
        required
        defaultValue="default@gmail.com"
        name="email"
        label="Email"
        placeholder="Email"
      />
      <FormInput
        required
        name="password"
        type="password"
        label="Password"
        placeholder="Password"
      />
      <button type="submit" className="border">
        Click here to submit (or press "Enter")
      </button>

      <p>formDataObj: {JSON.stringify(formDataObj)}</p>
    </form>
  );
};

export default Uncontrolled;