HelpBot Assistant

How can I help you?

Customize the UI appearance of the NumericTextBox component in React

21 Feb 20262 minutes to read

Apply custom styling to the NumericTextBox 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 NumericTextBox appearance with custom CSS.

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