Blazor MaskedTextBox - Overview

My Profile

Phone Number
  • Overview.razor
  • MyProfileTemplate.razor
Loading the demo source code...please wait.

Style in ThemeBuilder

  • Custom SASS variables
  • Atomic customizations
  • Sharing projects
Start Theming
blazor ui ninja image

The MaskedTextBox component is part of Telerik UI for Blazor, a professional grade UI library with 110+ native components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

Description

The Telerik UI for Blazor MaskedTextBox allows you to get user input while ensuring valid entry of specific formats.

The Blazor MaskedTextBox component provides a mask and prompts the user to enter data in the required format, preventing input that does not match the mask. You can use it to show users the exact format they need to use to provide information like phone numbers, credit card numbers, ZIP codes, IP addresses, percentage values and so on.

You can also add a custom CSS class or control various attributes of the input element, such as the name, placeholder, tab index and more, as well as access and respond to events fired upon user behaviors.  

Various features make the Telerik UI for Blazor MaskedTextBox a powerful form building component:

  • Value: Can be used for binding.
  • IncludeLiterals: Choose whether the literal characters such as brackets and dashes are included in the saved value. The default setting is false.
  • Class: Use the wrapper class to modify the component’s style.
  • DebounceDelay: Set time between typed entries and value updating.
  • Placeholder: Display a string in the input area to instruct or direct the user.
  • ValidateOn: Configure the event that will trigger validation.
  • Mask: Show the pattern the user must follow.
  • MaskOnFocus: Show the mask to the user only upon focus.
  • Prompt: The character the user sees in the mask where there is no value.
This Blazor MaskedTextBox Overview example is part of a unique collection of hundreds of Blazor demos, with which you can see all Telerik UI for Blazor components and their features in action. View the source code of the demos from the library or directly adapt, and edit them and their theme appearance in Telerik REPL for Blazor or ThemeBuilder.

Support & Learning Resources

Additional Resources

An error has occurred. This application may no longer respond until reloaded.