Masks

The MaskedTextBox supports a set of built-in masks.

The supported mask rules are:

  • 0—Requires a digit (0-9).
  • 9—Requires a digit (0-9) or a space.
  • #—Requires a digit (0-9), space, plus (+), or minus (-) sign.
  • L—Requires a letter (a-Z).
  • ?—Requires a letter (a-Z) or a space.
  • A—Requires an alphanumeric (0-9, a-Z).
  • a—Requires an alphanumeric (0-9, a-Z) or a space.
  • &—Requires a character (excluding space).
  • C—Requires a character or a space.

You can also define custom rules by using the rules property.

Apart from the built-in and custom rules, you can also use static symbols in the mask pattern that are also known as literals. In the masked value, a literal is always rendered on the same position as the position where it is defined in the mask property.

To escape a mask rule, use the slash (\) character. An escaped rule turns into a literal.

The following example demonstrates how to use the digit-requiring mask (0) and the literal (-) of the MaskedTextBox.

class App extends React.Component {
    render() {
        return (
            <MaskedTextBox
                mask="0000-0000-0000-0000"
                defaultValue="5748-1570-0019-4334"
            />
        )
    }
}

ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);

The following example demonstrates how to extend the available mask rules.

class App extends React.Component {
    mask = "YYYY LLLL";
    rules = {
        "L": /[a-zA-Z]/,
        "Y": /[\u0400-\u0481\u048A-\u04FF]/
    };

    render() {
        return (
            <div>
                <div className="example-config">
                    <p>{this.mask}</p>
                    <ul>
                        <li>Y - cyrillic only</li>
                        <li>L - latin only</li>
                    </ul>
                </div>
                <MaskedTextBox
                    mask={this.mask}
                    defaultValue="абвг abcd"
                    rules={this.rules}
                />
            </div>
        )
    }
}

ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);
In this article
 /