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

NumericTextBox Overview

The NumericTextBox enables the user to edit and submit specific numeric values by typing or by using the spin buttons.

It converts an <input> element into a numeric, percentage, or currency textbox. The conversion data type depends on the specific format. The component renders spin buttons which increase or decrease its value with a predefined step. The NumericTextBox accepts only numeric entries and uses the kendo.culture.current culture to determine the number precision and other culture-specific properties. When the NumericTextBox initializes, it wraps the <input> element with a <span></span> tag and renders Spin buttons.

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

Basic Usage

The following example demonstrates the NumericTextBox in action.

class NumericTextBoxContainer extends React.Component {
    constructor(props) {
        super(props);
        this.value = props.value;
    }

    render() {
        return (
            <div className="row">
                <div className="col-xs-12 col-sm-6 example-col">
                   <NumericTextBox value={this.value} />
                </div>
            </div>
        );
    }
}
ReactDOM.render(
    <NumericTextBoxContainer value={ 12.3456 } />,
    document.querySelector('my-app')
);

Features and Functionalities

Events

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

class NumericTextBoxContainer extends React.Component {
    constructor(props) {
        super(props);
        this.onChange = this.onChange.bind(this);
        this.onSpin = this.onSpin.bind(this);
    }

    onChange = (e) => {
        console.log("event :: change");
    }

    onSpin = (e) => {
        console.log("event :: spin");
    }

    render() {
        return (
            <div className="row">
                <div className="col-xs-12 col-sm-6 example-col">
                   <NumericTextBox
                        change={this.onChange}
                        spin={this.onSpin}/>
                </div>
            </div>
        );
    }
}
ReactDOM.render(
    <NumericTextBoxContainer />,
    document.querySelector('my-app')
);
In this article