RadzenMask Class

RadzenMasklinkLink to this section

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()

CharacterPatternlinkLink to this section

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

ImmediatelinkLink to this section

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

InputSizelinkLink to this section

Gets or sets the size of the component.

Declaration

public InputSize InputSize { get; set; }

Property Value

MasklinkLink to this section

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

MaxLengthlinkLink to this section

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

PatternlinkLink to this section

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

ReadOnlylinkLink to this section

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

BuildRenderTreelinkLink to this section

Declaration

protected override void BuildRenderTree(Rendering.RenderTreeBuilder __builder)

Parameters

DisposelinkLink to this section

Declaration

public override void Dispose()

GetComponentCssClasslinkLink to this section

Declaration

protected override string GetComponentCssClass()

Returns

GetIdlinkLink to this section

Declaration

protected override string GetId()

Returns

OnAfterRenderAsynclinkLink to this section

Declaration

protected override Task OnAfterRenderAsync(bool firstRender)

Parameters

Returns

OnInputlinkLink to this section

Handles the oninput event when Immediate="true".

Declaration

protected Task OnInput(ChangeEventArgs args)

Parameters

Returns

SetParametersAsynclinkLink to this section

Declaration

public override Task SetParametersAsync(ParameterView parameters)

Parameters

Returns

SetValuelinkLink to this section

Handles the change-event bind:set binding of the underlying input element. Reads the JS-formatted masked value when applicable and notifies listeners.

Declaration

protected Task SetValue(string value)

Parameters

Returns