Vue NumberBox - Overview

The NumberBox is a UI component that displays a numeric value and allows a user to modify it by typing in a value, and incrementing or decrementing it using the keyboard or mouse.

View Demo

The following code adds the NumberBox to your page. The simplest configuration of the UI component requires only a value to be specified. In addition, you can specify the placeholder to be displayed when the number box is empty.

jQuery
HTML
JavaScript
<div id="numberBoxContainer"></div>
$(function() {
    $("#numberBoxContainer").dxNumberBox({
        value: 20,
        placeholder: 'Enter your age'
    });
});
Angular
HTML
TypeScript
<dx-number-box
    [value]="20"
    placeholder="Enter your age">
</dx-number-box>
import { DxNumberBoxModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxNumberBoxModule
    ],
    // ...
})
Vue
App.vue
<template> 
    <DxNumberBox
        :value="20"
        placeholder="Enter your age"
    />
</template>

<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import DxNumberBox from 'devextreme-vue/number-box';

export default {
    components: {
        DxNumberBox
    }
}
</script>
React
App.js
import React from 'react';

import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import NumberBox from 'devextreme-react/number-box';

class App extends React.Component {
    render() {
        return (
            <NumberBox
                defaultValue={20}
                placeholder="Enter your age" />
        );
    }
}
export default App;

In most cases, it is useful to specify the range of possible values. For this purpose, set the min and max properties.

jQuery
JavaScript
$(function() {
    $("#numberBoxContainer").dxNumberBox({
        value: 20,
        min: 16,
        max: 100
    });
});
Angular
HTML
TypeScript
<dx-number-box
    [value]="20"
    [min]="16"
    [max]="100">
</dx-number-box>
import { DxNumberBoxModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxNumberBoxModule
    ],
    // ...
})
Vue
App.vue
<template> 
    <DxNumberBox
        :value="20"
        :min="16"
        :max="100"
    />
</template>

<script>
import DxNumberBox from 'devextreme-vue/number-box';

export default {
    components: {
        DxNumberBox
    }
}
</script>
React
App.js
import React from 'react';

import NumberBox from 'devextreme-react/number-box';

class App extends React.Component {
    render() {
        return (
            <NumberBox
                defaultValue={20}
                min={16}
                max={100} />
        );
    }
}
export default App;

If the entered value falls out of the range, the UI component sets the value to the lower (if the value is less than the lower bound) or upper bound (if the value is greater than the upper bound).

See Also