Inputs / NumericTextBox / Getting Started
material theme

Getting Started with KendoReact NumericTextBox

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

The KendoReact NumericTextBox is distributed through NPM under the kendo-react-inputs package.

The NumericTextBox component is part of KendoReact, a professionally built commercial UI library. To try out this component you need to sign up for a 30-day trial, which gives you access to the full KendoReact library.

Start Free Trial

Basic Usage

The following example demonstrates the NumericTextBox in action.

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            value: null
        };
    }

    ChangeKilometers = (e) => {
        this.setState({
            value: e.value
        });
    }

    ChangeMiles = (e) => {
        this.setState({
            value: e.value !== null ? e.value * 1.609344 : null
        });
    }

    render() {
        return (
            <div>
                <label>
                    <NumericTextBox
                        placeholder="please enter value"
                        value={this.state.value}
                        onChange={this.ChangeKilometers}
                    /> Kilometers
                </label>
                <br />
                <label>
                    <NumericTextBox
                        placeholder="please enter value"
                        value={this.state.value == null ? null : this.state.value / 1.609344}
                        onChange={this.ChangeMiles}
                    /> Miles
                </label>
            </div>
        );
    }
}
ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);

Functionality and Features

Known Limitations

To keep its value, the NumericTextBox uses the Number JavaScript object. The Number JavaScript object persists its precision up to 16 digits, and units which are longer than that get converted to exponential numbers and lose their precision. Because the component relies on Number, it inherits the precision limitation and because the limitation is caused by the JavaScript logic, the NumericTextBox does not provide a workaround to handle it.

Is this article helpful?

Not finding the help you need?

Contact Support