RadzenMask Class

A masked text input component that enforces a specific format pattern as users type (e.g., phone numbers, dates, credit cards). RadzenMask guides users to enter data in the correct format by automatically formatting input according to a mask pattern. Uses a pattern string where asterisks (*) represent user-input positions and other characters are literals. As users type, the input is automatically formatted to match the mask. Features mask pattern definition using * for input positions (e.g., "(***) ***-****" for phone numbers), character filtering via Pattern (regex) to remove invalid characters and CharacterPattern (regex) to specify valid characters, automatic insertion of literal characters (parentheses, dashes, spaces, etc.), and placeholder showing the expected format to guide users. Common uses include phone numbers, dates, credit cards, SSN, postal codes, or any fixed-format data entry. The mask helps prevent input errors and improves data consistency.

Implements

IComponent

IHandleEvent

IHandleAfterRender

IRadzenFormComponent

Inherited Members

FormComponentWithAutoComplete<string>.SetParametersAsync

FormComponentWithAutoComplete<string>.AutoCompleteType

FormComponentWithAutoComplete<string>.AutoCompleteAttribute

FormComponentWithAutoComplete<string>.DefaultAutoCompleteAttribute

FormComponentWithAutoComplete<string>.DefaultAriaAutoCompleteAttribute

FormComponentWithAutoComplete<string>.AriaAutoCompleteAttribute

FormComponent<string>.Dispose

FormComponent<string>.GetValue

FormComponent<string>.OnContextMenu

FormComponent<string>.GetClassList

FormComponent<string>.FocusAsync

FormComponent<string>.Name

FormComponent<string>.TabIndex

FormComponent<string>.Placeholder

FormComponent<string>.Disabled

FormComponent<string>.EditContext

FormComponent<string>.Form

FormComponent<string>.ValueChanged

FormComponent<string>.HasValue

FormComponent<string>.IsBound

FormComponent<string>.Value

FormComponent<string>.Change

FormComponent<string>.FieldIdentifier

FormComponent<string>.ValueExpression

FormComponent<string>.FormFieldContext

FormComponent<string>.CurrentPlaceholder

FormComponent<string>._value

RadzenComponent.OnMouseEnter

RadzenComponent.OnMouseLeave

RadzenComponent.GetCssClass

RadzenComponent.GetId

RadzenComponent.Debounce

RadzenComponent.OnInitialized

RadzenComponent.OnAfterRenderAsync

RadzenComponent.RaiseContextMenu

RadzenComponent.RaiseMouseEnter

RadzenComponent.AddContextMenu

RadzenComponent.RaiseMouseLeave

RadzenComponent.OnBecameInvisible

RadzenComponent.Attributes

RadzenComponent.Element

RadzenComponent.MouseEnter

RadzenComponent.MouseLeave

RadzenComponent.ContextMenu

RadzenComponent.Culture

RadzenComponent.DefaultCulture

RadzenComponent.Style

RadzenComponent.Visible

RadzenComponent.UniqueID

RadzenComponent.JSRuntime

RadzenComponent.IsJSRuntimeAvailable

RadzenComponent.Reference

RadzenComponent.CurrentStyle

ComponentBase.OnInitializedAsync

ComponentBase.OnParametersSet

ComponentBase.OnParametersSetAsync

ComponentBase.StateHasChanged

ComponentBase.ShouldRender

ComponentBase.InvokeAsync

ComponentBase.DispatchExceptionAsync

ComponentBase.RendererInfo

ComponentBase.Assets

ComponentBase.AssignedRenderMode

Namespace: Radzen.Blazor

Assembly: Radzen.Blazor.dll

Syntax

public class RadzenMask : FormComponentWithAutoComplete<string>, IComponent, IHandleEvent, IHandleAfterRender, IRadzenFormComponent

Examples

Phone number mask:

<RadzenMask Mask="(***) ***-****" Pattern="[^0-9]" Placeholder="(000) 000-0000" @bind-Value=@phoneNumber />

Date mask:

<RadzenMask Mask="**/**/****" CharacterPattern="[0-9]" Placeholder="MM/DD/YYYY" @bind-Value=@dateString />

Credit card mask:

<RadzenMask Mask="**** **** **** ****" Pattern="[^0-9]" Placeholder="0000 0000 0000 0000" @bind-Value=@cardNumber />

Constructors

RadzenMasklink

A masked text input component that enforces a specific format pattern as users type (e.g., phone numbers, dates, credit cards). RadzenMask guides users to enter data in the correct format by automatically formatting input according to a mask pattern. Uses a pattern string where asterisks (*) represent user-input positions and other characters are literals. As users type, the input is automatically formatted to match the mask. Features mask pattern definition using * for input positions (e.g., "(***) ***-****" for phone numbers), character filtering via Pattern (regex) to remove invalid characters and CharacterPattern (regex) to specify valid characters, automatic insertion of literal characters (parentheses, dashes, spaces, etc.), and placeholder showing the expected format to guide users. Common uses include phone numbers, dates, credit cards, SSN, postal codes, or any fixed-format data entry. The mask helps prevent input errors and improves data consistency.

Declaration
public RadzenMask()

Properties

CharacterPatternlink

Gets or sets a regular expression pattern specifying which characters are valid for user input. Only characters matching this pattern are accepted as the user types. If both Pattern and CharacterPattern are set, CharacterPattern takes precedence. Example: "[0-9]" allows only digit characters.

Declaration
public string CharacterPattern { get; set; }
Property Value
Type Description
stringGets or sets a regular expression pattern specifying which characters are valid for user input. Only characters matching this pattern are accepted as the user types. If both Pattern and CharacterPattern are set, CharacterPattern takes precedence. Example: "[0-9]" allows only digit characters.

Immediatelink

Gets or sets whether the component should update the bound value immediately as the user types (oninput event), rather than waiting for the input to lose focus (onchange event). This enables real-time value updates but may trigger more frequent change events.

Declaration
public bool Immediate { get; set; }
Property Value
Type Description
boolGets or sets whether the component should update the bound value immediately as the user types (oninput event), rather than waiting for the input to lose focus (onchange event). This enables real-time value updates but may trigger more frequent change events.

Masklink

Gets or sets the mask pattern that defines the input format. Use asterisks (*) for user input positions and literal characters for formatting. Example: "(***) ***-****" creates a phone number format like "(555) 123-4567".

Declaration
public string Mask { get; set; }
Property Value
Type Description
stringGets or sets the mask pattern that defines the input format. Use asterisks (*) for user input positions and literal characters for formatting. Example: "(***) ***-****" creates a phone number format like "(555) 123-4567".

MaxLengthlink

Gets or sets the maximum number of characters that can be entered. Typically matches the mask length, but can be set for additional constraints.

Declaration
public long? MaxLength { get; set; }
Property Value
Type Description
long?Gets or sets the maximum number of characters that can be entered. Typically matches the mask length, but can be set for additional constraints.

Patternlink

Gets or sets a regular expression pattern for removing invalid characters from user input. Characters matching this pattern are stripped out as the user types. Example: "[^0-9]" removes all non-digit characters for numeric-only input.

Declaration
public string Pattern { get; set; }
Property Value
Type Description
stringGets or sets a regular expression pattern for removing invalid characters from user input. Characters matching this pattern are stripped out as the user types. Example: "[^0-9]" removes all non-digit characters for numeric-only input.

ReadOnlylink

Gets or sets whether the masked input is read-only and cannot be edited. When true, displays the formatted value but prevents user input.

Declaration
public bool ReadOnly { get; set; }
Property Value
Type Description
boolGets or sets whether the masked input is read-only and cannot be edited. When true, displays the formatted value but prevents user input.

Methods

BuildRenderTreelink

Declaration
protected override void BuildRenderTree(Rendering.RenderTreeBuilder __builder)
Parameters
Type Name Description
Rendering.RenderTreeBuilder __builder

GetComponentCssClasslink

Declaration
protected override string GetComponentCssClass()
Returns
Type Description
string

OnAfterRenderlink

Declaration
protected override void OnAfterRender(bool firstRender)
Parameters
Type Name Description
bool firstRender

OnChangelink

Handles the change event.

Declaration
protected Task OnChange(ChangeEventArgs args)
Parameters
Type Name Description
ChangeEventArgs args The ChangeEventArgs instance containing the event data.
Returns
Type Description
Task

OnInputlink

Handles the oninput event when Immediate="true".

Declaration
protected Task OnInput(ChangeEventArgs args)
Parameters
Type Name Description
ChangeEventArgs args The ChangeEventArgs instance containing the event data.
Returns
Type Description
Task
An error has occurred. This app may no longer respond until reloaded. Reload 🗙