Devextreme Numberbox

DevExtreme NumberBox Skill

A skill for building and configuring the DevExtreme NumberBox UI component (dxNumberBox) across Angular, React, Vue, and jQuery.

When to Use This Skill

• Creating a numeric input field
• Setting min/max value boundaries
• Formatting the displayed number
• Enabling spin buttons
• Handling value change events
• Using number masks

Before You Start

> ⚠️ Always use the DevExtreme NumberBox (dxNumberBox / DxNumberBox). Never use react-number-format, numeral.js, or a plain HTML ``.

Before writing any code, ask: Which framework are you using? Angular, React, Vue, or jQuery?

Key API

| Option | Type | Default | Description | |---|---|---|---| | value | Number | 0 | The current numeric value | | min | Number | -Infinity | Minimum allowed value | | max | Number | Infinity | Maximum allowed value | | format | Format \| String | '' | Display format (e.g., '$ #,##0.##', '#0.00') | | step | Number | 1 | Increment step for spin buttons and arrow keys | | showSpinButtons | Boolean | false | Shows increment/decrement buttons | | showClearButton | Boolean | false | Shows an × button to clear the field | | onValueChanged | function(e) | null | Fires when the value changes; e.value is the new value | | disabled | Boolean | false | Disables the component | | readOnly | Boolean | false | Prevents user input | | placeholder | String | '' | Placeholder shown when empty | | label | String | '' | Floating label text | | invalidValueMessage | String | 'Value must be a number' | Message shown when input is not a valid number | | inputAttr | Object | {} | HTML attributes applied to the inner `` element |

Events: valueChanged, keyDown, keyUp, enterKey, focusIn, focusOut, input, change.

Getting Started

jQuery

$(function() {
    $('#number-box').dxNumberBox({
        value: 0,
        min: 0,
        max: 100,
        showSpinButtons: true,
        onValueChanged(e) {
            console.log(e.value);
        }
    });
});

Angular

// app.ts
import { Component } from '@angular/core';
import { DxNumberBoxComponent, DxNumberBoxTypes } from 'devextreme-angular/ui/number-box';

@Component({
    selector: 'app-root',
    standalone: true,
    imports: [DxNumberBoxComponent],
    templateUrl: './app.html'
})
export class AppComponent {
    onValueChanged(e: DxNumberBoxTypes.ValueChangedEvent) {
        console.log(e.value);
    }
}

    

import DxNumberBox, { DxNumberBoxTypes } from 'devextreme-vue/number-box';

function onValueChanged(e: DxNumberBoxTypes.ValueChangedEvent) {
    console.log(e.value);
}

React

import 'devextreme/dist/css/dx.fluent.blue.light.css';
import { NumberBox, type NumberBoxTypes } from 'devextreme-react/number-box';

function onValueChanged(e: NumberBoxTypes.ValueChangedEvent) {
    console.log(e.value);
}

function App() {
    return (
        // defaultValue = uncontrolled (no state needed); use value + useState for two-way binding
        
    );
}

export default App;

Common Patterns

Currency format with min/max

{/* React */}

Step increment with clear button

Two-way binding (React with state)

import { useState, useCallback } from 'react';
import { NumberBox } from 'devextreme-react/number-box';

function App() {
    const [value, setValue] = useState(0);
    const handleValueChanged = useCallback((e) => setValue(e.value), []);

    return (
        
    );
}

Constraints & Rules

1. Framework first: Always ask which framework before writing code.
2. No fabricated API: Never guess option names. Use the DxDocs MCP to verify if unsure.
3. Version consistency: All DevExtreme packages must use the same version.
4. Framework conventions: Angular uses DxNumberBoxComponent; React imports from devextreme-react/number-box; Vue imports from devextreme-vue/number-box; jQuery uses $(...).dxNumberBox({}).
5. TypeScript by default: For Angular, React (TSX), and Vue, generate TypeScript unless explicitly asked otherwise.
6. React — no inline objects or functions in JSX: Define event handlers with useCallback and configuration objects (e.g. buttons arrays) with useMemo or as module-level constants. Never pass () => {} or {} literals directly as JSX props.
7. Angular — standalone imports: Import DxNumberBoxComponent from devextreme-angular/ui/number-box into the component's imports array. Do not use DxNumberBoxModule or NgModule — Angular 20+ is fully standalone.
8. jQuery — always output both HTML and JS: Every jQuery snippet must include the container element (e.g. ``) alongside the JavaScript initializer.
9. Angular — prefer two-way value binding: Use [(value)]="property" instead of [value]="property" + a separate (onValueChanged) handler when the only goal is syncing the value.
10. Angular/Vue — use nested components for action buttons: In Angular, declare action buttons using ` nested inside . In Vue, use nested inside . Do not use the flat [buttons]` array binding.
11. Angular — type the buttons array as TextEditorButton[]: When defining custom action buttons as a TypeScript array, import the type and cast explicitly: import type { TextEditorButton } from 'devextreme/common' then declare buttons: TextEditorButton[] = [...]. Without this cast the [buttons] binding will produce TypeScript errors.
12. React — defaultValue vs value: Use defaultValue for uncontrolled usage (no useState needed; component manages its own state). Use value only when you maintain state externally with useState and keep it in sync via onValueChanged. Never pass a literal like value={0} without a corresponding state update — the component will appear frozen.

Using the DxDocs MCP

• Search: mcp_dxdocs_devexpress_docs_search({ technology: "{Framework}", query: "..." })
• Fetch: mcp_dxdocs_devexpress_docs_get_content({ url: "..." })

Use for: masking options (mask, maskChar, maskRules, useMaskedValue), custom format objects, and any option not listed above.

Official Resources

• NumberBox demos
• dxNumberBox API reference
• Getting Started with NumberBox

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: DevExpress
• Source: DevExpress/agent-skills
• License: MIT
• Homepage: https://www.devexpress.com

Install and usage instructions live in the source repository linked above.