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.
FormComponentWithAutoComplete<string>.SetParametersAsync
FormComponentWithAutoComplete<string>.AutoCompleteType
FormComponentWithAutoComplete<string>.AutoCompleteAttribute
FormComponentWithAutoComplete<string>.DefaultAutoCompleteAttribute
FormComponentWithAutoComplete<string>.DefaultAriaAutoCompleteAttribute
FormComponentWithAutoComplete<string>.AriaAutoCompleteAttribute
FormComponent<string>.GetValue
FormComponent<string>.OnContextMenu
FormComponent<string>.GetClassList
FormComponent<string>.FocusAsync
FormComponent<string>.TabIndex
FormComponent<string>.Placeholder
FormComponent<string>.Disabled
FormComponent<string>.EditContext
FormComponent<string>.ValueChanged
FormComponent<string>.HasValue
FormComponent<string>.FieldIdentifier
FormComponent<string>.ValueExpression
FormComponent<string>.FormFieldContext
FormComponent<string>.CurrentPlaceholder
RadzenComponent.OnAfterRenderAsync
RadzenComponent.RaiseContextMenu
RadzenComponent.RaiseMouseEnter
RadzenComponent.AddContextMenu
RadzenComponent.RaiseMouseLeave
RadzenComponent.OnBecameInvisible
RadzenComponent.DefaultCulture
RadzenComponent.IsJSRuntimeAvailable
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
public class RadzenMask : FormComponentWithAutoComplete<string>, IComponent, IHandleEvent, IHandleAfterRender, IRadzenFormComponentPhone 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 />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.
public RadzenMask()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.
public string CharacterPattern { get; set; }
| Type | Description |
|---|---|
| string | 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. |
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.
public bool Immediate { get; set; }
| Type | Description |
|---|---|
| bool | 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. |
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".
public string Mask { get; set; }
| Type | Description |
|---|---|
| string | 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". |
Gets or sets the maximum number of characters that can be entered. Typically matches the mask length, but can be set for additional constraints.
public long? MaxLength { get; set; }
| 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. |
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.
public string Pattern { get; set; }
| Type | Description |
|---|---|
| string | 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. |
Gets or sets whether the masked input is read-only and cannot be edited. When true, displays the formatted value but prevents user input.
public bool ReadOnly { get; set; }
| Type | Description |
|---|---|
| bool | Gets or sets whether the masked input is read-only and cannot be edited. When true, displays the formatted value but prevents user input. |
protected override void BuildRenderTree(Rendering.RenderTreeBuilder __builder)
| Type | Name | Description |
|---|---|---|
| Rendering.RenderTreeBuilder | __builder |
protected override string GetComponentCssClass()
| Type | Description |
|---|---|
| string |
protected override void OnAfterRender(bool firstRender)
| Type | Name | Description |
|---|---|---|
| bool | firstRender |
Handles the change event.
protected Task OnChange(ChangeEventArgs args)
| Type | Name | Description |
|---|---|---|
| ChangeEventArgs | args | The ChangeEventArgs instance containing the event data. |
| Type | Description |
|---|---|
| Task |
Handles the oninput event when Immediate="true".
protected Task OnInput(ChangeEventArgs args)
| Type | Name | Description |
|---|---|---|
| ChangeEventArgs | args | The ChangeEventArgs instance containing the event data. |
| Type | Description |
|---|---|
| Task |