How to customize the spin button arrow in React Numeric TextBox

4 Sep 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);
  }

index.jsx

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'));

index.tsx

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'));