Default Light
MgLibrary
Overview
Installation
Buttons
Cards
Charts
Codes
Data Grids
Dropdowns
Editors
Headers & Animations
Icons
Indicators
Inputs
Lists
Modals
Menus
Panels
Pills & Chips
Scheduling
Tabs
Time Line
Trees
Customization

Masked Edit

Input fields with a predefined format, such as phone numbers or social security numbers. Masked edits help ensure data consistency and improve user experience.

Use this example to explore default behavior, customization points, and accessibility-friendly patterns in a real Blazor page.

Masked Edit

MgMaskedEdit

A small input control that enforces an input pattern using masks. Use masks like "000-000" for numeric groups or "AAA-000" for mixed text and numbers.

API Reference

MgMaskedEdit

Property Type Default Description
Mask string "" Mask pattern. Use '0' for digits, 'A' for letters, the mask separator is '-' and is inserted automatically.
MaskSeparator string "-" Set the separator character that you prefer, defaults to '-'
FieldValueChanged EventCallback<string> - Callback invoked when the masked value changes. Receives the formatted value.
An unhandled error has occurred. Reload 🗙