ComponentsInputs and forms
Mask
Masks shape text while it is typed: delimiters appear on their own and characters that do not fit are refused. Use them for values with a fixed structure such as phone numbers, card numbers, dates and account codes.
Pattern masks
In a PatternMask, 0 accepts a digit, a a letter and * either; every other character is a delimiter inserted for the user. Placeholder shows the remaining slots and Transformation can upper-case input. MudBlazor recommends masks for WebAssembly: on Blazor Server every keystroke makes a network round trip, and the caret can land in the wrong place.
Date masks
DateMask understands day, month and year blocks in any order, and refuses impossible dates such as 31 April or 29 February in a common year.
Regular-expression masks
A RegexMask accepts input while the expression can still match, so it must allow partial values. Built-in factories cover IPv4, times, hex colors and email.
Credit cards with MultiMask
MultiMask switches pattern as the first digits reveal the card network: American Express groups 4-6-5, most others 4-4-4-4.
Network: type a number
Block masks
BlockMask accepts runs of letters or digits with a minimum and maximum length, for codes whose parts vary in size.
An account number with a checksum
The mask handles the shape of an IBAN-like account number; a validation function checks the mod-97 check digits once it is complete.
Try the public examples DE89 3704 0044 0532 0130 00 or GB82 WEST 1234 5698 7654 32.
The MudMask input
MudMask is the masked input on its own, with the same labels, variants and clear button as a text field. Custom MaskChars define what each placeholder accepts: here L is an upper-case letter.
Postcode: — · Platform: —
Variants and states
Masked fields are ordinary text fields: variants, clear buttons, helper text, disabled and read-only all behave the same.