Create Masked Numeric Component

[brandonrq506]

As a user, I want to have numeric masked inputs, so that I can see the numbers clearly separated by locale separators.

Given that I click on a numeric Input field And I enter a value, like 10000000 Then I see displayed 10,000,000 Or any other variant based on Intl.Numeric.

AC:

• Must be fully compatible with React Hook Form.
• Must be saved in RHF as a numeric value
• Phones should only display the numeric keyboard.
• Should not accept any letters.

[brandonrq506]

Code Necessary for when ready to implement

import { useForm } from "react-hook-form";
import { Button } from "@/components/core";

const normalizeCardNumber = (value: string) => {
  return (
    value
      .replace(/\s/g, "")
      .match(/.{1,4}/g)
      ?.join(" ")
      .substring(0, 19) || ""
  );
};

type FormValues = {
  cardNumber: string;
};

export const TestForm = () => {
  const { register, handleSubmit, formState } = useForm<FormValues>();
  const { errors } = formState;

  const onSubmit = (data: FormValues) => {
    console.log({ ...data, cardNumber: +data.cardNumber.replace(/\s/g, "") });
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
        <div className="flex flex-col">
          <label htmlFor="creditCard">Card Number: </label>
          <input
            id="creditCard"
            type="tel"
            inputMode="numeric"
            placeholder="0000 0000 0000 0000"
            autoComplete="cc-number"
            {...register("cardNumber", { required: true })}
            onChange={(event) => {
              const { value } = event.target;
              event.target.value = normalizeCardNumber(value);
            }}
          />
          <p className="error">{errors.cardNumber?.message}</p>
        </div>
      </div>
      <Button type="submit" variant="secondary" className="mt-2">
        Submit
      </Button>
    </form>
  );
};