Docs
InputMask

InputMask

Input with a formatting mask for common numeric patterns — phone, CPF, CNPJ, CEP, date. Inherits the entire base Input API (size, variants, icons, clearable) and applies the formatting as the user types.

When to use

✅ Use when…🚫 Avoid when…
  • Collecting structured data where presentation matters: formatted phone numbers, CPF/CNPJ with dots and dashes, dates in the Brazilian format.
  • When you need the already-formatted value in onChange (250 ms debounce included).
  • For free text entry. Use Input.
  • For lists of predefined options. Use InputSelect.
  • For monetary values — there is a dedicated InputCurrency that handles decimal/thousand/prefix.

Supported masks

<InputMask mask="(00) 00000-0000" placeholder="Phone" />
<InputMask mask="000.000.000-00" placeholder="CPF" />
<InputMask mask="00.000.000/0000-00" placeholder="CNPJ" />
<InputMask mask="00/00/0000" placeholder="Date" />
<InputMask mask="00000-000" placeholder="CEP" />

Combining with Form and validation

<Form
  handleSubmit={(values) => console.log(values)}
  fields={{
    birthDate: {
      component: InputMask,
      label: 'Birth Date',
      inputProps: { mask: '00/00/0000', placeholder: 'dd/mm/yyyy' },
      validation: z
        .string()
        .min(1, 'Required')
        .refine((d) => isValid(parse(d, 'dd/MM/yyyy', new Date())), {
          message: 'Enter a valid date',
        }),
    },
  }}
/>

Properties

Prop
Type
Default
Description
clearable
boolean
—
Shows a clear button ("×" icon) when there is a value. Requires `reset` to work outside a `Form`.
icon
any
—
React element rendered inside the input (usually an `<Icon />`). When set, the input automatically makes room to avoid collision with the typed text. @example ```tsx <Input icon={<Icon icon={search} />} iconPosition="left" /> ```
iconPosition
"right" | "left"
'right'
Side on which the icon (`icon` or the clear button) is rendered.
mask *
string
—
Mask pattern — `0` accepts a digit, any other character is a literal (kept between the digits). Examples: - `(00) 00000-0000` → phone - `000.000.000-00` → CPF - `00/00/0000` → date
onChange
((value: string) => void)
—
Callback fired (debounced at 250 ms) with the already formatted string.
reset
(() => void)
—
Callback invoked when the user clicks the clear button (`clearable`). Inside a `Form`, it is injected automatically; in standalone use, it must clear the controlled state.
size
"expansive" | "medium" | "compact" | "micro"
'medium'
Size token of the input.
value
string
—
—
variant
"default" | "success" | "error"
'default'
Visual variant of the input — reflects the validation state.

In addition to the props above, every component accepts the layout props (spacing, color, flex/grid, sizing, border) — not repeated here.

See also

InputInputDate