How to customize the UI in React Numeric TextBox

4 Sep 20261 minute to read

Apply custom styling to the React Numeric TextBox by adding a custom CSS class using the cssClass property. This allows you to override default styles and match your application’s design system. The following example demonstrates how to customize the React Numeric TextBox appearance with custom CSS.

index.jsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import { NumericTextBoxComponent } from '@syncfusion/ej2-react-inputs';
// initializes NumericTextBox component
export default class App extends React.Component {
    render() {
        return (<NumericTextBoxComponent id="sample" value={10} cssClass={'e-style'} placeholder="Enter value" floatLabelType={'Always'}/>);
    }
}
ReactDOM.render(<App />, document.getElementById('numericContainer'));

index.tsx

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

// initializes NumericTextBox component
export default class App extends React.Component<{}, {}> {
  render() {
    return (
      <NumericTextBoxComponent id="sample" value={10} cssClass={'e-style'} placeholder="Enter value" floatLabelType={'Always'}/>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('numericContainer'));