All Components

This website hosts Kendo UI wrappers of Kendo UI for jQuery widgets intended to be used in the React ecosystem.

Go to the native Kendo UI implementations for React

MaskedTextBox Overview

The MaskedTextBox uses a mask to control the input of the user.

You can define the specific format by using the mask option of the component. Each mask can contain mask rules and mask literals. The mask literals are automatically entered for the user and cannot be removed. When the MaskedTextBox initializes, it decorates the <input> element with a k-textbox CSS class.

The MaskedTextBox supports the following predefined rules:

  • Required or optional digit input.
  • Required or optional letter input.
  • Required or optional character input (allows any character).

The default mask is an empty string which allows any input. To restrict user input, define a mask value.

The MaskedTextBox wrapper for React is a client-side wrapper for the Kendo UI MaskedTextBox widget.

Basic Usage

The following example demonstrates the MaskedTextBox in action.

class MaskedTextBoxContainer extends React.Component {
    constructor(props) {
        super(props);
        this.mask = props.mask;
    }

    render() {
        return (
            <div className="row">
                <div className="col-xs-12 col-sm-6 example-col">
                   <MaskedTextBox mask={this.mask} />
                </div>
            </div>
        );
    }
}
ReactDOM.render(
    <MaskedTextBoxContainer mask={'(999) 000-0000'} />,
    document.querySelector('my-app')
);

Features and Functionalities

Events

The following example demonstrates basic MaskedTextBox events. You can subscribe to all MaskedTextBox events by the handler name.

class MaskedTextBoxContainer extends React.Component {
    constructor(props) {
        super(props);
        this.mask = props.mask;
        this.state = {
            value : props.value
        };
        this.onChange = this.onChange.bind(this);
    }

    onChange = (e) => {
        console.log("Value changed to: " + e.sender.value());

        this.setState({
            value: e.sender.raw()
        });
    }    

    render() {
        return (
            <div className="row">
                <div className="col-xs-12 col-sm-6 example-col">
                   <MaskedTextBox  
                        value={this.state.value}
                        mask={this.mask}
                        change={this.onChange} />

                    <br /><br />

                    <h4>THE CURRENT STATE IS:</h4>

                    <p className="result">{JSON.stringify(this.state.value)}</p>
                </div>
            </div>
        );
    }
}
ReactDOM.render(
    <MaskedTextBoxContainer mask={'(999) 000-0000'} value={'1234567891'}/>,
    document.querySelector('my-app')
);
In this article