Form Field Masked Input
A pre-composed form field that wraps a MaskedInput control with automatic label, helper text, and error message display. Inherits from FormFieldBase, which provides EditContext integration, auto-generated control IDs, ARIA attribute wiring, and validation error state management. Supports built-in mask presets (Phone, SSN, Credit Card, etc.) and custom mask patterns.
Default
A basic
FormFieldMaskedInput with a phone number preset and two-way binding via @bind-Value. The component automatically generates a unique ID to associate the label with the input for accessibility.US phone number format
Value:
Built-in Presets
Use the
Preset parameter to apply a built-in mask format. Available presets include Phone, CreditCard, SSN, Date, ZipCode, and more.MM/DD/YYYY
Custom Mask
Set
Preset to Custom (the default) and provide a Mask pattern. Use 9 for digits, A for letters, and * for alphanumeric characters.Format: ABC-1234 (A=letter, 9=digit)
Value:
With Error
Use
ErrorText to manually set a validation error. Click Validate to trigger the error when the input is empty, or enter a value to clear it.Disabled
Set
Disabled to true to prevent user interaction. The input and label display with reduced opacity.Contact support to update.
EditForm Validation
Inside an
EditForm, validation errors from DataAnnotationsValidator display automatically. Try submitting without filling in the fields.