This tutorial shows how to add NumberBox to a page and configure the component's core settings. As a result, you will create the following UI component:

Each section in this tutorial describes a single configuration step. You can also find the full source code in the following GitHub repository: getting-started-with-number-box.

Create a NumberBox

jQuery

Add DevExtreme to your jQuery application and use the following code to create a NumberBox component:

index.js

index.html

$(function() {
    $("#number-box").dxNumberBox({ });
});

<html>
    <head>
        <!-- ... -->
        <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
        <link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/24.1.7/css/dx.light.css">
        <script type="text/javascript" src="https://cdn3.devexpress.com/jslib/24.1.7/js/dx.all.js"></script>
        <script type="text/javascript" src="index.js"></script>
    </head>
    <body>
        <div id="number-box"></div>
    </body>
</html>

Angular

Add DevExtreme to your Angular application and use the following code to create a NumberBox component:

app.component.html

app.component.ts

app.module.ts

<dx-number-box></dx-number-box>

import { Component } from "@angular/core";

@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    styleUrls: ["./app.component.css"]
})
export class AppComponent {

}

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { AppComponent } from "./app.component";

import { DxNumberBoxModule } from "devextreme-angular";

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DxNumberBoxModule
    ],
    providers: [ ],
    bootstrap: [AppComponent]
})
export class AppModule { }

Vue

Add DevExtreme to your Vue application and use the following code to create a NumberBox component:

App.vue

<template>
    <DxNumberBox>
    </DxNumberBox>
</template>

<script>
import "devextreme/dist/css/dx.light.css";
import { DxNumberBox } from "devextreme-vue/number-box";

export default {
    components: {
        DxNumberBox
    }
}
</script>

React

Add DevExtreme to your React application and use the following code to create a NumberBox component:

App.js

import React from "react";

import "devextreme/dist/css/dx.light.css";

import { NumberBox } from "devextreme-react/number-box";

function App() {
    return (
        <NumberBox>
        </NumberBox>
    );
}

export default App;

Limit and Format the Value

If you need to specify the initial value, assign it to the value property. You can also define a range of the min and max values the user can enter into the input field.

NumberBox allows you to display the input values in a custom format. To define this format, assign it to the format property.

jQuery

index.js

$(function() {
    $("#number-box").dxNumberBox({
        value: 261991,
        min: 0,
        max: 1000000,
        format: "$ #,##0.##"
    });
});

Angular

app.component.html

<dx-number-box
    [value]="261991"
    [min]="0"
    [max]="1000000"
    format="$ #,##0.##"
>
</dx-number-box>

Vue

App.vue

<template>
    <DxNumberBox
        :value="261991"
        :min="0"
        :max="1000000"
        format="$ #,##0.##"
    />
</template>

<script>
// ...
</script>

React

App.js

// ...

function App() {
    // ...
    return (
        <NumberBox
            value={261991}
            min={0}
            max={1000000}
            format="$ #,##0.##"
        />
    );
}

export default App;

Configure Spin Buttons

Users can click the spin buttons to increase or decrease the NumberBox's input value. To display these buttons, enable the showSpinButtons property. Use the step property to specify a step by which the component value changes when users click the spin buttons, press the Up/Down arrow keys, or roll the mouse wheel. You can also enable the showClearButton property to show a button that clears the input field.

jQuery

index.js

$(function() {
    $("#number-box").dxNumberBox({
        // ...
        step: 5,
        showSpinButtons: true,
        showClearButton: true,
    });
});

Angular

app.component.html

<dx-number-box ...
    [step]="5"
    [showSpinButtons]="true"
    [showClearButton]="true"
>
</dx-number-box>

Vue

App.vue

<template>
    <DxNumberBox ...
        :step="5"
        :show-spin-buttons="true"
        :show-clear-button="true"
    />
</template>

<script>
// ...
</script>

React

App.js

// ...

function App() {
    // ...
    return (
        <NumberBox ...
            step={5}
            showSpinButtons={true}
            showClearButton={true}
        />
    );
}

export default App;

Specify the Label

You can add a label to the NumberBox and define its appearance. To display the label, assign the text to the label property. To change the label's appearance, set the labelMode property to one of the following values:

"static" (default)
The component displays the label above the input field.
"floating"
The component uses the label as a placeholder, but the label moves to the position above the input field when the editor receives focus.
"hidden"
The label is hidden.

jQuery

index.js

$(function() {
    $("#number-box").dxNumberBox({
        // ...
        label: "Enter a sum in dollars",
        labelMode: "floating",
    });
});

Angular

app.component.html

<dx-number-box ...
    label="Enter a sum in dollars"
    labelMode="floating"
>
</dx-number-box>

Vue

App.vue

<template>
    <DxNumberBox ...
        label="Enter a sum in dollars"
        label-mode="floating"
    />
</template>

<script>
// ...
</script>

React

App.js

// ...

function App() {
    // ...
    return (
        <NumberBox ...
            label="Enter a sum in dollars"
            labelMode="floating"
        />
    );
}

export default App;

Handle Value Change

Users can enter a new value or change the component value with spin buttons, Up and Down arrow keys, and mouse wheel. Implement the onValueChanged callback to handle value changes.

The following code displays a notification every time users change the NumberBox value:

jQuery

index.js

$(function() {
    $("#number-box").dxNumberBox({
        // ...
        onValueChanged(e) {
            if (e.value) {
                DevExpress.ui.notify({
                    message: "The sum is $" + e.value
                });
            }
        }
    });
});

Angular

app.component.html

app.component.ts

<dx-number-box ...
    (onValueChanged)="onValueChanged($event)"
>
</dx-number-box>

import { Component } from "@angular/core";
import notify from "devextreme/ui/notify";

@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    styleUrls: ["./app.component.css"]
})
export class AppComponent {
    // ...
    onValueChanged(e) {
        if (e.value) {
            notify({
                message: "The sum is $" + e.value
            });
        }
    }
}

Vue

App.vue

<template>
    <DxNumberBox ...
        @value-changed="onValueChanged($event)"
    />
</template>

<script>
// ...
import { DxNumberBox } from "devextreme-vue/number-box";
import notify from "devextreme/ui/notify";

export default {
    components: {
        DxNumberBox
    },
    methods: {
        onValueChanged(e) {
            if (e.value) {
                notify({
                    message: "The sum is $" + e.value
                });
            }
        }
    }
}
</script>

React

App.js

import React, { useCallback } from "react";
import "devextreme/dist/css/dx.light.css";

import { NumberBox } from "devextreme-react/number-box";
import notify from "devextreme/ui/notify";

function App() {
    const onValueChanged = useCallback((e) => {
        if (e.value) {
            notify({
                message: "The sum is $" + e.value
            });
        }
    }, []);

    return (
        <NumberBox ...
            onValueChanged={onValueChanged}
        />
    );
}

export default App;

Feedback

Was this page helpful?

Thanks for your feedback!
Any other suggestions? Tell us here.

Additional Feedback

General Information

.NET Subscription

Common Tools

Quality Assurance and Productivity

Desktop

Controls

Tools

Frameworks and Libraries

Web

Controls and Extensions

Tools

Maintenance Mode

Mobile

Enterprise and Analytic Tools

End-User Documentation

General Information

.NET Subscription

Common Tools

Quality Assurance and Productivity

Desktop

Controls

Tools

Frameworks and Libraries

Web

Controls and Extensions

Tools

Maintenance Mode

Mobile

Enterprise and Analytic Tools

End-User Documentation

JavaScript/jQuery NumberBox - Getting Started

jQuery

Angular

Vue

React

Create a NumberBox

jQuery

Angular

Vue

React

Limit and Format the Value

jQuery

Angular

Vue

React

Configure Spin Buttons

jQuery

Angular

Vue

React

Specify the Label

jQuery

Angular

Vue

React

Handle Value Change

jQuery

Angular

Vue

React