Forms

TwMaskedInput

TwMaskedInput is a Blazor input that enforces a structured format as you type, such as a phone number or custom code. Bind the raw value and set a Mask.

Last updated 27 October 2026

Please be aware this component is new, may have bugs and/or be subject to change. Please report any bugs at https://github.com/twblazor/twblazor/issues.

Basic usage

Set Mask to a string of tokens and literals, and bind the raw value with @bind-Value. A 9 accepts a digit 0-9, A a letter A-Z or a-z and * either; every other character is a literal shown between them. The mask needs at least one token, its 9, A and * cannot be escaped, and characters past the mask's length are dropped - digits and letters fill left to right. Here the mask (999) 999-9999 formats a phone number, and the bound value stays as the ten raw digits.

Phone number

Value:

RAZOR

<TwMaskedInput Label="Phone number" Mask="(999) 999-9999" @bind-Value="phone" />
<p class="mt-2 text-sm text-gray-600 dark:text-gray-400">Value: <strong>@phone</strong></p>

CSHARP

@code {
    private string phone = string.Empty;
}

Custom mask

Tokens can be mixed freely. A part number such as ABC-1234 is three letters, a dash, then four digits: the mask AAA-9999. A character the position does not accept is ignored, and the mobile keyboard matches the mask when it is all digits.

Part number

Value:

RAZOR

<TwMaskedInput Label="Part number" Mask="AAA-9999" @bind-Value="partNumber" />
<p class="mt-2 text-sm text-gray-600 dark:text-gray-400">Value: <strong>@partNumber</strong></p>

CSHARP

@code {
    private string partNumber = string.Empty;
}

Placeholder character

PlaceholderChar is the character shown for each unfilled mask position, _ by default. Choose another, such as a space, to make the unfilled positions subtler.

Account number

Value:

RAZOR

<TwMaskedInput Label="Account number" Mask="9999-9999-9999" PlaceholderChar="'·'" @bind-Value="accountNumber" />
<p class="mt-2 text-sm text-gray-600 dark:text-gray-400">Value: <strong>@accountNumber</strong></p>

CSHARP

@code {
    private string accountNumber = string.Empty;
}

Show mask

By default (ShowMask is true) an empty field shows the full mask so its structure is visible up front. Set ShowMask="false" to leave an empty field empty, so the mask only reveals itself as the user types.

Mask shown

Mask hidden

RAZOR

<div class="grid gap-4 sm:grid-cols-2">
    <TwMaskedInput Label="Mask shown" Mask="999-999" @bind-Value="maskShown" />
    <TwMaskedInput Label="Mask hidden" Mask="999-999" ShowMask="false" Placeholder="Enter digits" @bind-Value="maskHidden" />
</div>

CSHARP

@code {
    private string maskShown = string.Empty;
    private string maskHidden = string.Empty;
}

Clearable

Clearable shows the textfield's clear button, which empties the field and sets the bound value back to an empty string.

Phone number

Value: 5551234567

RAZOR

<TwMaskedInput Label="Phone number" Mask="(999) 999-9999" Clearable @bind-Value="clearablePhone" />
<p class="mt-2 text-sm text-gray-600 dark:text-gray-400">Value: <strong>@clearablePhone</strong></p>

CSHARP

@code {
    private string clearablePhone = "5551234567";
}

Variants and dense

Variant and Dense work exactly as they do on TwTextfield, so a masked input lines up with the other inputs.

Default

Outlined

Filled

RAZOR

<div class="grid gap-4 sm:grid-cols-3">
    <TwMaskedInput Label="Default" Mask="9999" Variant="InputVariant.Default" @bind-Value="variantValue" />
    <TwMaskedInput Label="Outlined" Mask="9999" Variant="InputVariant.Outlined" @bind-Value="variantValue" />
    <TwMaskedInput Label="Filled" Mask="9999" Variant="InputVariant.Filled" Dense @bind-Value="variantValue" />
</div>

CSHARP

@code {
    private string variantValue = string.Empty;
}

Disabled and readonly

Disabled dims the field and prevents input. ReadOnly keeps the value readable and focusable, but it cannot be changed.

Disabled

Readonly

RAZOR

<div class="grid gap-4 sm:grid-cols-2">
    <TwMaskedInput Label="Disabled" Mask="(999) 999-9999" Value="5551234567" Disabled />
    <TwMaskedInput Label="Readonly" Mask="(999) 999-9999" Value="5551234567" ReadOnly />
</div>

Validation

Validation works as it does on TwTextfield: pass a Validator that returns an error message, or null when the value is valid, or set Invalid and ErrorMessage yourself. The message is tied to the field with aria-describedby, so screen readers read it with the field. The mask lives in the field's value, so screen readers announce the placeholder characters and Required alone does not block submit - use model validation through ValueExpression for a required field.

SSN

Extension

RAZOR

<div class="grid gap-4 sm:grid-cols-2">
    <TwMaskedInput Label="SSN" Mask="999-99-9999" Required Validator="ValidateSsn" @bind-Value="ssn" />
    <TwMaskedInput Label="Extension" Mask="9999" Invalid="@(extension.Length > 0 && extension.Length < 4)" ErrorMessage="Enter all four digits." @bind-Value="extension" />
</div>

CSHARP

@code {
    private string ssn = string.Empty;
    private string extension = string.Empty;
    
    private static Task<string?> ValidateSsn(string value) =>
        Task.FromResult<string?>(value.Length == 9 ? null : "Enter the full 9 digits.");
}

Update on input

Typed text is committed when the field loses focus or Enter is pressed. Set BindEvent="oninput" to update the value on every keystroke instead.

Live value

Value:

RAZOR

<TwMaskedInput Label="Live value" Mask="9999-9999" BindEvent="oninput" @bind-Value="liveValue" />
<p class="mt-2 text-sm text-gray-600 dark:text-gray-400">Value: <strong>@liveValue</strong></p>

CSHARP

@code {
    private string liveValue = string.Empty;
}

A masked input is a text field that keeps its text in the shape of a mask. Its clear button is not a Tab stop.

Key	What it does
`Tab` or `Shift` plus `Tab`	Moves focus into or out of the field.
`Arrow Left` or `Arrow Right` or `Home` or `End`	Moves the caret through the text.
`Enter`	Commits the typed value, when the field binds on change.

TwMaskedInput

Basic usage

Custom mask

Placeholder character

Show mask

Clearable

Variants and dense

Disabled and readonly

Validation

Update on input

Keyboard navigation