Masked Input
A text input that formats user input according to a defined mask pattern.
Phone Number (US Format)
Format phone numbers as users type.
Value (digits only):
Optimized for Performance & Best Typing Experience
By default, MaskedInput uses UpdateOn="Change" for better performance and UX.
The bound value contains only the raw digit/letter characters, not the mask characters.
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 when targeting WebAssembly where interactivity is fully client-side.
International Phone Number
Format international phone numbers with country codes.
Value:
Value:
Value:
Social Security Number
Format Social Security Numbers.
Value:
Credit Card Number
Format credit card numbers with space separators.
Value:
Date Input
Format date inputs with different regional formats.
Value:
Value:
Time Input
Format time inputs in 12-hour or 24-hour format.
Value:
Value:
ZIP Code
Standard 5-digit ZIP code.
Raw value: (empty)
ZIP+4 Code
Extended ZIP code with 4-digit extension.
Raw value: (empty)
Custom Mask - Product Code
Custom pattern: AA-0000 (two letters, dash, four digits).
Raw value: (empty)
Custom Mask - License Plate
Custom pattern: 000-AAA (three digits, dash, three letters).
Raw value: (empty)
Indonesian National ID (KTP)
Indonesian National Identity Card (Kartu Tanda Penduduk) — 16 digit format with dots as separators.
Value:
💡 Format: Province.Regency.District.BirthDate.Sequence
Disabled State
Input with disabled state.
Readonly State
Input in readonly mode - focusable but not editable.
Without Mask Display
ShowMask set to false - only shows characters as you type.
Raw value: (empty)
Form Validation
Integrate with Blazor EditForm and DataAnnotations.
Error State
Input with error visualization using aria-invalid.
This phone number is invalid.
Required State
Input with HTML5 required validation.
API Reference
Component parameters and their types.
| Prop | Type | Default | Description |
|---|---|---|---|
| Mask | string | — | Mask pattern. 0=digit, A=letter, *=any character. Other chars are literals. |
| Value | string? | null | Current value (raw digits/letters only). Use @bind-Value for two-way binding. |
| ValueChanged | EventCallback<string?> | — | Callback invoked when the value changes. |
| ShowMask | bool | true | Whether to show the mask template as placeholder text. |
| Placeholder | string? | null | Placeholder text when ShowMask is false. |
| Disabled | bool | false | Disables the input when true. |
| Readonly | bool | false | Makes the input read-only when true. |
| Required | bool | false | Marks the input as required for native form validation. |
| AriaInvalid | bool | false | Marks the input as invalid for screen readers. |
| ShowValidationError | bool | false | Shows browser native validation tooltip on invalid state. |
| Class | string? | null | Additional CSS classes appended to the input element. |