DevExtreme React - Control the Behavior

If you need to add spin buttons to the NumberBox, set the showSpinButtons to true.

jQuery
JavaScript
$(function() {
    $("#numberBoxContainer").dxNumberBox({
        value: 20,
        showSpinButtons: true
    });
});
Angular
HTML
TypeScript
<dx-number-box
    [value]="20"
    [showSpinButtons]="true">
</dx-number-box>
import { DxNumberBoxModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxNumberBoxModule
    ],
    // ...
})

To specify the step by which the value is changed, use the step option.

jQuery
JavaScript
$(function() {
    $("#numberBoxContainer").dxNumberBox({
        value: 20,
        showSpinButtons: true,
        step: 10
    });
});
Angular
HTML
TypeScript
<dx-number-box
    [value]="20"
    [showSpinButtons]="true"
    [step]="10">
</dx-number-box>
import { DxNumberBoxModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxNumberBoxModule
    ],
    // ...
})
See Also