React NumberBox - Getting Started
jQuery
Angular
Vue
React
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:
$(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.6/css/dx.light.css"> <script type="text/javascript" src="https://cdn3.devexpress.com/jslib/24.1.6/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:
<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:
<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:
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
$(function() { $("#number-box").dxNumberBox({ value: 261991, min: 0, max: 1000000, format: "$ #,##0.##" }); });
Angular
<dx-number-box [value]="261991" [min]="0" [max]="1000000" format="$ #,##0.##" > </dx-number-box>
Vue
<template> <DxNumberBox :value="261991" :min="0" :max="1000000" format="$ #,##0.##" /> </template> <script> // ... </script>
React
// ... 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
$(function() { $("#number-box").dxNumberBox({ // ... step: 5, showSpinButtons: true, showClearButton: true, }); });
Angular
<dx-number-box ... [step]="5" [showSpinButtons]="true" [showClearButton]="true" > </dx-number-box>
Vue
<template> <DxNumberBox ... :step="5" :show-spin-buttons="true" :show-clear-button="true" /> </template> <script> // ... </script>
React
// ... 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
$(function() { $("#number-box").dxNumberBox({ // ... label: "Enter a sum in dollars", labelMode: "floating", }); });
Angular
<dx-number-box ... label="Enter a sum in dollars" labelMode="floating" > </dx-number-box>
Vue
<template> <DxNumberBox ... label="Enter a sum in dollars" label-mode="floating" /> </template> <script> // ... </script>
React
// ... 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
$(function() { $("#number-box").dxNumberBox({ // ... onValueChanged(e) { if (e.value) { DevExpress.ui.notify({ message: "The sum is $" + e.value }); } } }); });
Angular
<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
<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
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;
If you have technical questions, please create a support ticket in the DevExpress Support Center.