Default Theme

MaskedTextField

Overview

Masked text fields (MaskedTextField) give people a way to enter and edit strings in a specified format. They’re used in forms, modal dialogs, tables, and other surfaces where input in a specified format is required.

Usage

These <MaskedTextField> components can be used both within and without <EditForm> block but you don't get validation messages when you don't put them in an <EditForm>

Customizable Masked TextField

With input mask

Example:

With input mask

Example:

<div class="textFieldDiv">
    <MaskedTextField Label="With input mask" @bind-Value=@model.exampleString1 Mask="m\ask: (999) 999 - 9999" MaskChar="'_'" />
</div>
Example: @model.exampleString1<br />
<div class="textFieldDiv">
    <MaskedTextField Label="With input mask" @bind-Value=@model.exampleString2 Mask="m\ask: ****" MaskFormat="*:[a-zA-Z0-9]" MaskChar="'?'" />
</div>
Example: @model.exampleString2

MaskedTextField with EditForm

<EditForm Model=@model OnValidSubmit=@HandleValidSubmit>
    <DataAnnotationsValidator />
    <FluentUIValidationSummary />
    <div class="textFieldDiv">
        <MaskedTextField Label="Mask test" @bind-Value="model.exampleString1" Mask="m\ask: (999) 999 - 9999" MaskChar="'_'" />
    </div>
    Example: @model.exampleString1<br />
    <SubmitButton Text="Submit" />
</EditForm>