MaskedInput Component

A structured input component with automatic masking and formatting.

Phone Number (US Format)

Automatically formats phone numbers with (000) 000-0000 pattern.

Phone Number

Raw value: (empty)

Optimized for Performance & Best Typing Experience

By default, MaskedInput uses UpdateOn="Change" for better performance and UX.

Benefits:

Better typing UX: No interruptions while typing - validation tooltips won't get in your way
Better performance: Value updates and validation only run when you tab away (blur)
Fewer re-renders: Your bound value updates once on blur, not on every keystroke

UpdateOn Modes:

UpdateOn="Change" → Updates on blur (default, recommended)

UpdateOn="Input" → Updates on every keystroke

Tip: Use UpdateOn="Input" only when you need real-time updates (e.g., live formatting preview, instant validation), or if you're targeting WebAssembly mode where interactivity will be fully handled in client-side.

International Phone Number

International format with country code.

International Phone

Raw value: (empty)

Social Security Number

SSN with 000-00-0000 format.

SSN

Raw value: (empty)

Credit Card Number

16-digit credit card with spacing.

Card Number

Raw value: (empty)

Date Input

Date in MM/DD/YYYY format.

Date

Raw value: (empty)

Time Input

Time in HH:MM format.

Time

Raw value: (empty)

ZIP Code

Standard 5-digit ZIP code.

ZIP Code

Raw value: (empty)

ZIP+4 Code

Extended ZIP code with 4-digit extension.

ZIP+4

Raw value: (empty)

Indonesian National ID (KTP)

Indonesian National Identity Card (Kartu Tanda Penduduk) - 16 digits format.

NIK (Nomor Induk Kependudukan)

Raw value: (empty)

💡 Format: Province.Regency.District.BirthDate.Sequence

Custom Mask - Product Code

Custom pattern: AA-0000 (two letters, dash, four digits).

Product Code

Raw value: (empty)

Custom Mask - License Plate

Custom pattern: 000-AAA (three digits, dash, three letters).

License Plate

Raw value: (empty)

Disabled State

Input with disabled state.

Disabled Phone

Readonly State

Input in readonly mode - focusable but not editable.

Readonly SSN

Without Mask Display

ShowMask set to false - only shows characters as you type.

Phone (no mask display)

Raw value: (empty)

Form Validation

Integration with EditForm and data annotations.

Error State

Input with error visualization using aria-invalid.

Invalid Phone

This phone number is invalid

Required State

Input with HTML5 required validation.