How to customize step and hide spin buttons in React Numeric TextBox

4 Sep 20261 minute to read

Control the increment/decrement behavior of the React Numeric TextBox by customizing the step value and controlling the visibility of spin buttons. Use the step property to define the increment value, and the showSpinButton property to show or hide the spin buttons.

index.jsx

import { NumericTextBoxComponent } from '@syncfusion/ej2-react-inputs';
import * as React from "react";
import * as ReactDOM from "react-dom";
// initializes NumericTextBox component
// sets the step value as '2' to increase/decrease the value by '2'
// sets the showSpinButton value as `false` to hide the spin buttons
ReactDOM.render(<NumericTextBoxComponent step={2} showSpinButton={false} min={10} max={100} value={16}/>, document.getElementById('numericContainer'));

index.tsx

import { NumericTextBoxComponent } from '@syncfusion/ej2-react-inputs';
import * as React from "react";
import * as ReactDOM from "react-dom";

// initializes NumericTextBox component
// sets the step value as '2' to increase/decrease the value by '2'
// sets the showSpinButton value as `false` to hide the spin buttons
ReactDOM.render(<NumericTextBoxComponent step={2} showSpinButton={false} min={10} max={100} value={16} />
,document.getElementById('numericContainer'));