React NumberBox - Getting Started

jQuery
NOTE
Before you start the tutorial, ensure DevExtreme is installed in your application.
Angular
NOTE
Before you start the tutorial, ensure DevExtreme is installed in your application.
Vue
NOTE
Before you start the tutorial, ensure DevExtreme is installed in your application.
React
NOTE
Before you start the tutorial, ensure DevExtreme is installed in your application.

The NumberBox component allows users to enter a number or specify it with the spin buttons.

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/23.2.10/css/dx.light.css">
        <script type="text/javascript" src="https://cdn3.devexpress.com/jslib/23.2.10/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;