Version v3 Documentation
You are viewing documentation for an older version.
View latest (v4) documentation →
Masked Input
An input with structured formatting that guides users through phone numbers, SSNs, credit cards, dates, and custom patterns. Built-in presets handle common formats, while the custom mask syntax supports any structured data entry.
Phone Number
Use
MaskPreset.Phone to apply a US phone number format with automatic parentheses, space, and hyphen placement. The mask (999) 999-9999 is applied automatically, and the bound Value contains only the raw digits without formatting characters.
Loading example…
Social Security Number
Use
MaskPreset.SSN to apply the standard SSN format XXX-XX-XXXX. Each position accepts only digits, and hyphens are inserted automatically as the user types. The raw value contains only the 9 digits without separators.
Loading example…
Credit Card
Use
MaskPreset.CreditCard to format a 16-digit card number into four groups separated by spaces. This grouping matches the physical card layout, making it easier for users to visually verify their input against the card in hand.
Loading example…
Date
Use
MaskPreset.Date to enforce the MM/DD/YYYY date format. Slashes are inserted automatically between the month, day, and year segments. For time-based masks, MaskPreset.Time and MaskPreset.Time24 are also available.
Loading example…
Custom Mask
Set
Preset to MaskPreset.Custom and provide a Mask string to define your own format. Use 9 for digits, A for letters, and * for alphanumeric characters. Any other character is treated as a literal separator. This example defines a product code format AAA-9999.
Loading example…
Custom Placeholder
Use the
PlaceholderChar parameter to change the character displayed for unfilled positions. The default is an underscore (_), but this example uses # for a different visual indicator. Set ShowMask to false to hide the mask entirely when the field is empty.
Loading example…
Custom Variant
Use the
Class parameter to apply custom Tailwind CSS classes to the input element. This example demonstrates a wider input with a primary border accent and gradient background, useful for prominent form fields or branding-specific designs.
Loading example…
Disabled
Set
Disabled to true to prevent user interaction. The input renders with reduced opacity and cursor-not-allowed styling, making it suitable for read-only displays of formatted data or temporarily locked form fields.
Loading example…
Payment Form
A real-world composition showing multiple
MaskedInput components in a payment form layout. Each field uses a different preset for card number, expiry date, and a custom mask for CVV. Combined with Field and Label components, this creates a structured, accessible checkout experience.
Loading example…
Public Methods
Use a component reference (@ref) to call this method programmatically.
| Method | Returns | Description |
|---|---|---|
| FocusAsync() | ValueTask | Moves keyboard focus to the underlying input element. Call via @ref — no JS interop needed. |
The component also exposes a public Element property of type ElementReference that points at the underlying input element, for advanced JS interop scenarios.