Customize the ui appearance of the control in React Numerictextbox component

30 Jan 20231 minute to read

You can change the appearance of the NumericTextBox by adding custom cssClass to the component and enabling styles. Refer to the following example to change the appearance of the NumericTextBox.

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