build69 / Components / Masked & Validated / InputMask

InputMask

v1.0.3Updated 22 Sept 2026

Masked input wrapping the shadcn Input visual contract on top of react-imask. Ships with pre-baked exports for phone, credit card, tax ID, date, time, and currency formats.

View source ← Back to catalog

Preview

Live · 7 stories

PlaygroundOpen ↗

▸Why this is recommendedformmaskinputformat+3

InputMask — playground.

Recommended for+14

✓Custom fixed-format text entry
✓Postal code entry
✓Booking or reference codes like ABC-1234
✓Serial or licence key entry
✓Any fixed pattern with no pre-baked preset

Tags+6

formmaskinputformatpatternreact-imaskplayground

Features+4

Pattern-based masking via react-imask
Named `blocks` for sub-masks (ranges, enums, nested patterns)
`lazy={false}` renders placeholder slots with a configurable placeholderChar
Sanitised value via onAccept; onComplete fires when the mask fills
Matches the shadcn Input focus ring, aria-invalid and dark-mode styling
Ref forwarded to the underlying <input>

Not recommended for−2

✕Free-form text (use Input)
✕Phone, card, tax ID, date, time or currency entry (use the dedicated preset component)
✕Numeric amounts with thousands separators (use CurrencyInput)
✕Server-validated patterns where formatting is server-side

Install

Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.

get_registry_item({ name: "InputMask" })

Usage

import { InputMask } from '@/components/inputs/input-mask/input-mask';

<InputMask mask="00000" value={postal} onAccept={setPostal} placeholder="10110" />
<InputMask mask="aaa-0000" lazy={false} placeholderChar="_" value={ref} onAccept={setRef} />

Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.

Props

PropTypeRequired

mask

IMask mask pattern, e.g. "00/00/0000"

stringyes

blocks

Named sub-masks referenced from `mask` (IMask blocks option)

Record<string, { mask: unknown } & Record<string, unknown>>—

value

Current masked value

string—

onAccept

Fires whenever the masked value changes

(value: string) => void—

onComplete

Fires when the mask is fully filled

(value: string) => void—

lazy

When false, the mask shows placeholders for empty slots (default true)

boolean—

placeholderChar

Placeholder character used when lazy={false} (default "_")