Blazor | ComponentOne
Controls / Input Controls / Masked Text Box / Masks
In This Topic
    Masks
    In This Topic

    MaskedTextBox supports the standard number formatting strings defined by Microsoft. The Mask string should consist of one or more of the masking elements as detailed in the following table:

    Element Description
    0 Digit, required. This element will accept any single digit between 0 and 9.
    9 Digit or space, optional.
    # Digit or space, optional. If this position is blank in the mask, it will be rendered as a space in the Text property. Plus (+) and minus (-) signs are allowed.
    L Letter, required. Restricts input to the ASCII letters a-z and A-Z. This mask element is equivalent to [a-zA-Z] in regular expressions.
    ? Letter, optional. Restricts input to the ASCII letters a-z and A-Z. This mask element is equivalent to [a-zA-Z]? in regular expressions.
    & Character, required.
    C Character, optional. Any non-control character.
    A Alphanumeric, optional.
    a Alphanumeric, optional.
    . Decimal placeholder. The actual display character used will be the decimal symbol appropriate to the format provider.
    , Thousands placeholder. The actual display character used will be the thousands placeholder appropriate to the format provider.
    : Time separator. The actual display character used will be the time symbol appropriate to the format provider.
    / Date separator. The actual display character used will be the date symbol appropriate to the format provider.
    $ Currency symbol. The actual character displayed will be the currency symbol appropriate to the format provider.
    < Shift down. Converts all characters that follow to lowercase.
    > Shift up. Converts all characters that follow to uppercase.
    | Disable a previous shift up or shift down.
    \ Escape. Escapes a mask character, turning it into a literal. "\\" is the escape sequence for a backslash.
    All other characters Literals. All non-mask elements will appear as themselves within C1MaskedTextBox. Literals always occupy a static position in the mask at run time, and cannot be moved or deleted by the user.

    The decimal (.), thousandths (,), time (:), date (/), and currency ($) symbols default to displaying those symbols as defined by the application's culture.

    Add a Mask

    By default, no input mask is applied on the MaskedTextBox control. However, you can set a mask using Mask property of the C1MaskedTextBox class. When a mask is applied, the C1MaskedTextBox.Mask string should consist of one or more of the masking elements. In the following example, we have set a mask for a phone number in the MaskedTextBox control.

    This is how the mask appears in the control:

    Masked TextBox control

    After entering a number, notice the output:

    Masked TextBox control after entering text.

     The following example demonstrates how you can set a mask for a phone number using the Mask property.

    Index.razor
    Copy Code
    <label>Phone Number</label>
    <br />
    <C1MaskedTextBox Mask="(999) 000-0000"></C1MaskedTextBox>
    

    Similarly, you can easily add different masks in the MaskedTextBox based on your requirements. For more examples of adding different masks in the MaskedtextBox control, see Quick Start.