HelpBot Assistant

How can I help you?

Customize the spin buttons up and down arrow in React NumericTextBox component

21 Feb 20261 minute to read

Replace the default increment and decrement icons with custom icons to match your application’s design. The spin button icons are controlled by the e-spin-up and e-spin-down CSS classes, which you can override with custom styling.

Customizing the spin button icons

Override the default icons of the e-spin-up and e-spin-down classes using the following CSS code snippets. Replace the content values with your desired Unicode icon codes:

  .e-numeric .e-input-group-icon.e-spin-up:before {
    content: "\e823";
    color: rgba(0, 0, 0, 0.54);
  }
  .e-numeric .e-input-group-icon.e-spin-down:before {
    content: "\e934";
    color: rgba(0, 0, 0, 0.54);
  }
import { NumericTextBoxComponent } from '@syncfusion/ej2-react-inputs';
import * as React from "react";
import * as ReactDOM from "react-dom";
// initializes NumericTextBox component
// sets value to the NumericTextBox
ReactDOM.render(<NumericTextBoxComponent value={10}/>, document.getElementById('numericContainer'));
import { NumericTextBoxComponent } from '@syncfusion/ej2-react-inputs';
import * as React from "react";
import * as ReactDOM from "react-dom";

// initializes NumericTextBox component
// sets value to the NumericTextBox
ReactDOM.render(<NumericTextBoxComponent value={10}/>, document.getElementById('numericContainer'));