Version v3 Documentation
You are viewing documentation for an older version.
View latest (v4) documentation →
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.
Loading example…
Built-in Presets
Use the
Preset parameter to apply a built-in mask format. Available presets include Phone, CreditCard, SSN, Date, ZipCode, and more.
Loading example…
Custom Mask
Set
Preset to Custom (the default) and provide a Mask pattern. Use 9 for digits, A for letters, and * for alphanumeric characters.
Loading example…
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.
Loading example…
Disabled
Set
Disabled to true to prevent user interaction. The input and label display with reduced opacity.
Loading example…
EditForm Validation
Inside an
EditForm, validation errors from DataAnnotationsValidator display automatically. Try submitting without filling in the fields.
Loading example…