Class RadzenMask
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.
Inheritance
Inherited Members
Namespace: Radzen.Blazor
Assembly: Radzen.Blazor.dll
Syntax
public class RadzenMask : FormComponentWithAutoComplete<string>, IComponent, IHandleEvent, IHandleAfterRender, IDisposable, IRadzenFormComponentRemarks
The mask component 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:
- Mask Pattern: Define the format using * for input positions (e.g., "(**) -" for phone numbers)
- Character Filtering: Pattern (regex) removes invalid characters, CharacterPattern (regex) specifies valid characters
- Auto-Formatting: Automatically inserts literal characters (parentheses, dashes, spaces, etc.)
- Placeholder: Shows 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.
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
RadzenMask()
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.
Declaration
public RadzenMask()Remarks
The mask component 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:
- Mask Pattern: Define the format using * for input positions (e.g., "(**) -" for phone numbers)
- Character Filtering: Pattern (regex) removes invalid characters, CharacterPattern (regex) specifies valid characters
- Auto-Formatting: Automatically inserts literal characters (parentheses, dashes, spaces, etc.)
- Placeholder: Shows 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.
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 />Properties
CharacterPattern
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
[Parameter]
public string CharacterPattern { get; set; }Property Value
| Type | Description |
|---|---|
| string | The regex pattern for valid input characters. |
Remarks
The mask component 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:
- Mask Pattern: Define the format using * for input positions (e.g., "(**) -" for phone numbers)
- Character Filtering: Pattern (regex) removes invalid characters, CharacterPattern (regex) specifies valid characters
- Auto-Formatting: Automatically inserts literal characters (parentheses, dashes, spaces, etc.)
- Placeholder: Shows 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.
Mask
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
[Parameter]
public string Mask { get; set; }Property Value
| Type | Description |
|---|---|
| string | The mask pattern string where * represents input positions. |
Remarks
The mask component 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:
- Mask Pattern: Define the format using * for input positions (e.g., "(**) -" for phone numbers)
- Character Filtering: Pattern (regex) removes invalid characters, CharacterPattern (regex) specifies valid characters
- Auto-Formatting: Automatically inserts literal characters (parentheses, dashes, spaces, etc.)
- Placeholder: Shows 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.
MaxLength
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
[Parameter]
public long? MaxLength { get; set; }Property Value
| Type | Description |
|---|---|
| long? | The maximum character length, or null for no limit beyond the mask. Default is null. |
Remarks
The mask component 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:
- Mask Pattern: Define the format using * for input positions (e.g., "(**) -" for phone numbers)
- Character Filtering: Pattern (regex) removes invalid characters, CharacterPattern (regex) specifies valid characters
- Auto-Formatting: Automatically inserts literal characters (parentheses, dashes, spaces, etc.)
- Placeholder: Shows 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.
Pattern
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
[Parameter]
public string Pattern { get; set; }Property Value
| Type | Description |
|---|---|
| string | The regex pattern for invalid characters to remove. |
Remarks
The mask component 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:
- Mask Pattern: Define the format using * for input positions (e.g., "(**) -" for phone numbers)
- Character Filtering: Pattern (regex) removes invalid characters, CharacterPattern (regex) specifies valid characters
- Auto-Formatting: Automatically inserts literal characters (parentheses, dashes, spaces, etc.)
- Placeholder: Shows 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.
ReadOnly
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
[Parameter]
public bool ReadOnly { get; set; }Property Value
| Type | Description |
|---|---|
| bool |
|
Remarks
The mask component 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:
- Mask Pattern: Define the format using * for input positions (e.g., "(**) -" for phone numbers)
- Character Filtering: Pattern (regex) removes invalid characters, CharacterPattern (regex) specifies valid characters
- Auto-Formatting: Automatically inserts literal characters (parentheses, dashes, spaces, etc.)
- Placeholder: Shows 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.
Methods
BuildRenderTree(RenderTreeBuilder)
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.
Declaration
protected override void BuildRenderTree(RenderTreeBuilder __builder)Parameters
| Type | Name | Description |
|---|---|---|
| RenderTreeBuilder | __builder |
Overrides
Remarks
The mask component 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:
- Mask Pattern: Define the format using * for input positions (e.g., "(**) -" for phone numbers)
- Character Filtering: Pattern (regex) removes invalid characters, CharacterPattern (regex) specifies valid characters
- Auto-Formatting: Automatically inserts literal characters (parentheses, dashes, spaces, etc.)
- Placeholder: Shows 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.
GetComponentCssClass()
Gets the component CSS class.
Declaration
protected override string GetComponentCssClass()Returns
| Type | Description |
|---|---|
| string |
Overrides
Remarks
The mask component 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:
- Mask Pattern: Define the format using * for input positions (e.g., "(**) -" for phone numbers)
- Character Filtering: Pattern (regex) removes invalid characters, CharacterPattern (regex) specifies valid characters
- Auto-Formatting: Automatically inserts literal characters (parentheses, dashes, spaces, etc.)
- Placeholder: Shows 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.
OnAfterRender(bool)
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.
Declaration
protected override void OnAfterRender(bool firstRender)Parameters
| Type | Name | Description |
|---|---|---|
| bool | firstRender |
Overrides
Remarks
The mask component 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:
- Mask Pattern: Define the format using * for input positions (e.g., "(**) -" for phone numbers)
- Character Filtering: Pattern (regex) removes invalid characters, CharacterPattern (regex) specifies valid characters
- Auto-Formatting: Automatically inserts literal characters (parentheses, dashes, spaces, etc.)
- Placeholder: Shows 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.
OnChange(ChangeEventArgs)
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 |
Remarks
The mask component 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:
- Mask Pattern: Define the format using * for input positions (e.g., "(**) -" for phone numbers)
- Character Filtering: Pattern (regex) removes invalid characters, CharacterPattern (regex) specifies valid characters
- Auto-Formatting: Automatically inserts literal characters (parentheses, dashes, spaces, etc.)
- Placeholder: Shows 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.