"use client";

import * as React from "react";

import { cn } from "@/lib/utils";

export type MaskedInputType = "phone" | "credit-card" | "date";

export interface MaskedInputProps
  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "value" | "onChange"> {
  maskType?: MaskedInputType;
  value?: string;
  onChange?: (value: string, rawValue: string) => void;
}

const maskMap: Record<MaskedInputType, string> = {
  phone: "(###) ###-####",
  "credit-card": "#### #### #### ####",
  date: "##/##/####",
};

const formatMaskedValue = (rawValue: string, mask: string) => {
  let result = "";
  let rawIndex = 0;

  for (let i = 0; i < mask.length; i += 1) {
    const maskChar = mask[i];
    if (maskChar === "#") {
      if (rawIndex < rawValue.length) {
        result += rawValue[rawIndex];
        rawIndex += 1;
      } else {
        break;
      }
    } else {
      result += maskChar;
    }
  }

  return result;
};

export const MaskedInput = React.forwardRef<HTMLInputElement, MaskedInputProps>(
  (
    {
      className,
      maskType = "phone",
      value,
      onChange,
      placeholder,
      ...props
    },
    ref
  ) => {
    const [internalValue, setInternalValue] = React.useState("");
    const mask = maskMap[maskType];

    const inputValue = value !== undefined ? value : internalValue;

    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
      const rawDigits = event.target.value.replace(/\D/g, "");
      const formattedValue = formatMaskedValue(rawDigits, mask);

      if (value === undefined) {
        setInternalValue(formattedValue);
      }
      onChange?.(formattedValue, rawDigits);
    };

    return (
      <div className={cn("relative w-full max-w-sm", className)}>
        <span
          className={cn(
            "pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-sm text-muted-foreground transition",
            inputValue ? "opacity-0" : "opacity-100"
          )}
          aria-hidden="true"
        >
          {placeholder ?? mask}
        </span>
        <input
          ref={ref}
          value={inputValue}
          onChange={handleChange}
          inputMode="numeric"
          className={cn(
            "relative w-full rounded-lg border border-border bg-background py-2.5 pl-3 pr-3 text-sm text-foreground",
            "placeholder:text-muted-foreground",
            "transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
          )}
          {...props}
        />
      </div>
    );
  }
);

MaskedInput.displayName = "MaskedInput";
Masked Input

Dependencies

Files

Installation
