Components / Inputs / NumericTextBox

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 Vue is a client-side wrapper for Kendo UI NumericTextBox widget.

Basic Usage

The following example demonstrates the NumericTextBox in action.

<div id="vueapp" class="vue-app">
    <kendo-numerictextbox v-model.number="number"
                          :decimals="3"
                          :format="'c0'"
                          :min="0"
                          :max="1000"
                          :round="false"
                          :spinners="true">
    </kendo-numerictextbox>
</div>
Vue.use(InputsInstaller);

new Vue({
    el: "#vueapp",
    data () {
        return {
            number: 17
        }
    }
})

Functionality and Features

Events

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

<div id="vueapp" class="vue-app">
    <kendo-numerictextbox v-on:change="onChange"></kendo-numerictextbox>
</div>
Vue.use(InputsInstaller);

new Vue({
    el: "#vueapp",
    methods: {
        onChange (e) {
            var value = e.sender.value();
            console.log(value);
        }
    }
})

In this article