Progress Telerik UI for Blazor

MaskedTextBox

  • The Blazor MaskedTextBox component ensures valid entry of specific formats, such as IBAN, SWIFT code, phone number, post code, credit card number and custom formats.
  • This component is part of the largest truly native Blazor component suite - Telerik UI for Blazor designed to perfectly fit in any app’s requirement.
  • The Blazor UI suite also comes with professionally designed themes enabled with a flip of a switch, document processing library, rich docs & demos to help you get started in no time.
Telerik UI for Blazor Suite
Nasa, Visa, Microsoft Fox, Samsung, IBM World Bank Group, Volvo
  • Overview

    The Telerik UI for Blazor MaskedTextBox component is a text input control with the ability to validate a variety of text data like phone numbers, post codes, personal document numbers (e.g. passport IDs), credit card numbers. In addition to the common input masks you can define specific ones such as company-specific productid, employed etc.

    Telerik UI for Blazor MaskedTextBox Overview
  • Mask & Prompt

    The Mask of the MaskedTextBox is what defines what user input is allowed – the length of the input, the type of characters (e.g. a letter, a digit, etc.) and at what position. For example, the mask “0000-0000-0000-0000” limits inputs only to credit card numbers. The Prompt of the MaskedTextBox is the placeholder value displayed in the control to hint the user at expected type of input. The Prompt can be customized in a way very similar to the mask. Visit the MaskedTextBox docs on how the Mask and Prompt works.

    Telerik UI for Blazor MaskedTextBox Customizations
  • Labels

    Similarly, to the other text input components in our suite, the MaskedTextBox’s labels can be placed on top of the element statically, or as floating labels which initially appear as placeholder text and then are raised up over the element.

    Explore the Blazor MaskedTextBox labels

    Telerik UI for Blazor MaskedTextBox Floating Labels
  • TabIndex

    The Blazor MaskedTextBox component, just like all other Telerik UI for Blazor input components, supports keyboard navigation to switch between components thanks to the HTML TabIndex property. Pressing Tab will normally focus the next available input component, the same way your users are accustomed to when standard HTML inputs are used. Having the TabIndex setting lets you customize that order.
  • Events

    The two standard OnChange and ValueChanged are exposed by the MaskedTextBox Component:

    • OnChange is fired whenever the user confirms the new value – by pressing Enter or when the component loses focus. This event can be used with two-way binding.
    • ValueChanged is fired on every keystroke. This event cannot be used simultaneously with two-way binding.
    • OnBlur - an event which is triggered when it loses focus 

    Learn more about the Blazor MaskedTextBox Events in our documentation.
    Telerik UI for Blazor Events
  • Theming

    The Telerik UI for Blazor MaskedTextBox has several built-in themes such as Default (our own styling), Material (based on the Material Design guidelines) and Bootstrap (which looks like the Bootstrap styling to integrate better). You can easily customize any of out-of-the-box themes with a few lines of CSS, or create new theme to match your colors and branding by using the Telerik SASS ThemeBuilder application.
    Telerik UI for Blazor MaskedTextBox Theming

Next Steps

Launch demos

See Telerik UI for Blazor in action and check out how much it can do out-of-the-box.

Download free trial

Try Telerik UI for Blazor with dedicated technical support.