Back
Basic usage

Creating a NumericTextBox from <input />

Source:

<input id="numeric" value="10" type="number" min="-100" max="100" step="10"/>

<script>
    $("#numeric").kendoNumericTextBox();
</script>

Output:

Increase valueDecrease value

Creating a Currency NumericTextBox from <input />

Source:

<input id="currency" value="1.5" type="number" min="-100" max="100"/>

<script>
    $("#currency").kendoNumericTextBox({
        format: "c",
        decimals: 3
    });
</script>

Output:

Increase valueDecrease value

Creating a Percentage NumericTextBox from <input />

Source:

<input id="percentage" value="0.01" />

<script>
    $("#percentage").kendoNumericTextBox({
        format: "p0",
        min: 0,
        max: 1,
        step: 0.01
    });
</script>

Output:

Increase valueDecrease value

Creating a NumericTextBox from <input /> using custom format

Source:

<input id="custom" value="10" />

<script>
    $("#custom").kendoNumericTextBox({
        format: "#.00 pounds",
    });
</script>

Output:

Increase valueDecrease value