React Input Mask

An input mask helps people type a value in the right format, such as a date or an amount. MaskedInput is a text input that only accepts that format. It applies Inputmask 5 to a plain <input type="text">, and it is part of the PRO version of AdminKit for React.

Inputmask loads only when a page needs it. The first MaskedInput imports it with a dynamic import() when it appears on the page. Vite then puts Inputmask in its own chunk, and pages without a masked input never load it.

ExampleCopy Anchor Link

Give mask a mask string, or an object with Inputmask's options, such as an alias:

import { MaskedInput } from "@/components/plugins/masked-input";

export function VehicleFields() {
  return (
    <>
      <div className="mb-3">
        <label className="form-label" htmlFor="maskDate">Date</label>
        <MaskedInput
          className="form-control"
          id="maskDate"
          mask={{ alias: "datetime", inputFormat: "dd/mm/yyyy" }}
          aria-describedby="maskDateHelp"
        />
        <div className="form-text" id="maskDateHelp">e.g "DD/MM/YYYY"</div>
      </div>
      <div>
        <label className="form-label" htmlFor="maskPlate">License plate</label>
        <MaskedInput
          className="form-control"
          id="maskPlate"
          mask="[9-]AAA-999"
          aria-describedby="maskPlateHelp"
        />
        <div className="form-text" id="maskPlateHelp">e.g "9-ABC-123"</div>
      </div>
    </>
  );
}

In a mask string, 9 is a digit, A a letter (shown in upper case) and the part in [ ] is optional.

PropsCopy Anchor Link

Other props, such as className, id, name, placeholder and defaultValue, go to the <input>. type is "text" unless you pass another one. The component is in src/components/plugins/masked-input.tsx.

AliasesCopy Anchor Link

Inputmask has aliases: ready-made masks for common formats. The Advanced Inputs demo uses these masks:

<label className="form-label" htmlFor="maskCurrency">Amount</label>
<MaskedInput
  className="form-control"
  id="maskCurrency"
  mask={{
    alias: "numeric",
    groupSeparator: ",",
    digits: 2,
    digitsOptional: false,
    prefix: "$ ",
    placeholder: "0",
  }}
/>

The Inputmask README lists every option.

Reading the valueCopy Anchor Link

MaskedInput is uncontrolled. Inputmask writes the input's value itself, so do not pass value. Give the input a name and read it from the form when it is submitted, or keep a ref:

import { type FormEvent, useRef } from "react";
import { MaskedInput } from "@/components/plugins/masked-input";

export function PhoneForm() {
  const phone = useRef<HTMLInputElement>(null);

  const onSubmit = (event: FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    console.log(phone.current?.value); // "(555) 123-4567"
  };

  return (
    <form onSubmit={onSubmit}>
      <label className="form-label" htmlFor="phone">Phone</label>
      <MaskedInput ref={phone} className="form-control mb-3" id="phone" name="phone" mask="(999) 999-9999" />
      <button type="submit" className="btn btn-primary">Save</button>
    </form>
  );
}

The value includes the mask's literal characters. The mask is read once. To change it, render a new input with a different key.

AccessibilityCopy Anchor Link

• Label the input with <label htmlFor> and its id, as with any text field.
• The mask is not announced. Put the expected format in visible help text and link it with aria-describedby, as the examples do.
• Set inputMode ("numeric", "decimal", "email") where it fits, so mobile keyboards show the right keys.

RelatedCopy Anchor Link

• Next.js input mask: the same component in AdminKit for Next.js
• Bootstrap 5 input mask: the input mask of the HTML version
• Form controls: plain inputs and textareas
• Advanced Inputs demo