HelpBot Assistant

How can I help you?

Adornments in React NumericTextBox component

21 Feb 202624 minutes to read

Enhance the NumericTextBox component with prepended or appended visual elements using prependTemplate and appendTemplate properties. Adornments include currency symbols, unit labels, or action icons that provide context and improve the user input experience without affecting numeric validation or behavior.

Overview and Use Cases

Adornments serve multiple purposes in numeric input design:

  • Currency Symbols: Display monetary indicators such as $, €, ¥ to clarify input type
  • Unit Labels: Show measurement units (kg, cm, km, mph) to provide context
  • Action Icons: Include interactive buttons for clear, reset, or custom operations
  • Visual Context: Display status indicators or icons that describe the input purpose

Adding Adornments to NumericTextBox

Use prependTemplate and appendTemplate to insert custom HTML elements before or after the NumericTextBox input field:

  • prependTemplate: Renders content before (to the left of) the numeric input
  • appendTemplate: Renders content after (to the right of) the numeric input

These templates do not affect numeric validation and support any inline HTML or icon.

The following example demonstrates how to add adornments in the NumericTextBox control.

[Class-component]

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

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.iconNumericObj = React.createRef();
    this.prepenNumericObj = React.createRef();
    this.appendNumericObj = React.createRef();
  }

  onPriceChange = () => {
    this.appendNumericObj.current.value = this.prepenNumericObj.current.value * 5;
  };

  onKgChange = () => {
    this.prepenNumericObj.current.value = this.appendNumericObj.current.value / 5;
  };

  prependTemplate = () => {
    return (
      <>
        <span className="e-icons e-menu"></span>
        <span className="e-input-separator"></span>
        <span className="e-icons e-search"></span>
        <span className="e-input-separator"></span>
      </>
    );
  };

  appendTemplate = () => {
    return <span>kg</span>;
  };

  prependIconTemplate = () => {
    const handleResetClick = () => {
      this.iconNumericObj.current.value = null;
    };
    return (
      <>
        <span
          className="e-icons e-reset"
          title="Reset"
          onClick={handleResetClick}
        ></span>
        <span className="e-input-separator"></span>
      </>
    );
  };

  appendIconTemplate = () => {
    const handleSubractClick = () => {
      this.iconNumericObj.current.value = this.iconNumericObj.current.value - 1;
    };
    const handlePlusClick = () => {
      this.iconNumericObj.current.value = this.iconNumericObj.current.value + 1;
    };
    return (
      <>
        <span className="e-input-separator"></span>
        <span
          className="e-icons e-horizontal-line"
          onClick={handleSubractClick}
        ></span>
        <span className="e-input-separator"></span>
        <span className="e-icons e-plus" onClick={handlePlusClick}></span>
      </>
    );
  };

  render() {
    return (
      <div className="control-pane">
        <div className="col-lg-12 control-section">
          <div className="content-wrapper sample-numeric-icon">
            <div className="row custom-margin">
              <NumericTextBoxComponent
                ref={this.prepenNumericObj}
                floatLabelType="Auto"
                cssClass="e-prepend-numeric"
                value={1}
                placeholder="Enter the price"
                prependTemplate={this.prependTemplate}
                change={this.onPriceChange}
              />
            </div>
            <div className="row custom-margin">
              <NumericTextBoxComponent
                ref={this.appendNumericObj}
                floatLabelType="Auto"
                step={1}
                value={5}
                placeholder="Enter the kg"
                appendTemplate={this.appendTemplate}
                change={this.onKgChange}
              />
            </div>
            <div className="row custom-margin-row">
              <NumericTextBoxComponent
                ref={this.iconNumericObj}
                floatLabelType="Auto"
                placeholder="Enter the Number"
                value={10}
                showSpinButton={false}
                prependTemplate={this.prependIconTemplate}
                appendTemplate={this.appendIconTemplate}
              />
            </div>
          </div>
        </div>
      </div>
    );
  }
}
ReactDOM.render(<App />,document.getElementById('sample'));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { NumericTextBoxComponent } from '@syncfusion/ej2-react-inputs';
import { ChangeEventArgs } from '@syncfusion/ej2-inputs';

interface AdornmentsState {}

export default class App extends React.Component<{}, AdornmentsState> {
  iconNumericObj: React.RefObject<NumericTextBoxComponent> = React.createRef();
  prepenNumericObj: React.RefObject<NumericTextBoxComponent> = React.createRef();
  appendNumericObj: React.RefObject<NumericTextBoxComponent> = React.createRef();

  constructor(props: {}) {
    super(props);
  }

  onPriceChange = (): void => {
    if (this.appendNumericObj.current && this.prepenNumericObj.current) {
      this.appendNumericObj.current.value = 
        (this.prepenNumericObj.current.value as number) * 5;
    }
  };

  onKgChange = (): void => {
    if (this.prepenNumericObj.current && this.appendNumericObj.current) {
      this.prepenNumericObj.current.value = 
        (this.appendNumericObj.current.value as number) / 5;
    }
  };

  prependTemplate = (): React.ReactNode => {
    return (
      <>
        <span className="e-icons e-menu"></span>
        <span className="e-input-separator"></span>
        <span className="e-icons e-search"></span>
        <span className="e-input-separator"></span>
      </>
    );
  };

  appendTemplate = (): React.ReactNode => {
    return <span>kg</span>;
  };

  prependIconTemplate = (): React.ReactNode => {
    const handleResetClick = (): void => {
      if (this.iconNumericObj.current) {
        this.iconNumericObj.current.value = null;
      }
    };
    return (
      <>
        <span
          className="e-icons e-reset"
          title="Reset"
          onClick={handleResetClick}
        ></span>
        <span className="e-input-separator"></span>
      </>
    );
  };

  appendIconTemplate = (): React.ReactNode => {
    const handleSubractClick = (): void => {
      if (this.iconNumericObj.current) {
        this.iconNumericObj.current.value = 
          (this.iconNumericObj.current.value as number) - 1;
      }
    };
    const handlePlusClick = (): void => {
      if (this.iconNumericObj.current) {
        this.iconNumericObj.current.value = 
          (this.iconNumericObj.current.value as number) + 1;
      }
    };
    return (
      <>
        <span className="e-input-separator"></span>
        <span
          className="e-icons e-horizontal-line"
          onClick={handleSubractClick}
        ></span>
        <span className="e-input-separator"></span>
        <span className="e-icons e-plus" onClick={handlePlusClick}></span>
      </>
    );
  };

  render(): React.ReactNode {
    return (
      <div className="control-pane">
        <div className="col-lg-12 control-section">
          <div className="content-wrapper sample-numeric-icon">
            <div className="row custom-margin">
              <NumericTextBoxComponent
                ref={this.prepenNumericObj}
                floatLabelType="Auto"
                cssClass="e-prepend-numeric"
                value={1}
                placeholder="Enter the price"
                prependTemplate={this.prependTemplate}
                change={this.onPriceChange}
              />
            </div>
            <div className="row custom-margin">
              <NumericTextBoxComponent
                ref={this.appendNumericObj}
                floatLabelType="Auto"
                step={1}
                value={5}
                placeholder="Enter the kg"
                appendTemplate={this.appendTemplate}
                change={this.onKgChange}
              />
            </div>
            <div className="row custom-margin-row">
              <NumericTextBoxComponent
                ref={this.iconNumericObj}
                floatLabelType="Auto"
                placeholder="Enter the Number"
                value={10}
                showSpinButton={false}
                prependTemplate={this.prependIconTemplate}
                appendTemplate={this.appendIconTemplate}
              />
            </div>
          </div>
        </div>
      </div>
    );
  }
}

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

You can view the demo here: NumericTextBox Adornments demo.

[Functional-component]

import * as React from "react";
import * as ReactDOM from "react-dom";
import { useRef } from 'react';

import { NumericTextBoxComponent } from '@syncfusion/ej2-react-inputs';

function App(){
    const iconNumericObj = useRef(null);
    const prepenNumericObj = useRef(null);
    const appendNumericObj = useRef(null);
    const onPriceChange = () => {
        appendNumericObj.current.value = prepenNumericObj.current.value * 5;
    };
    const onKgChange = () => {
        prepenNumericObj.current.value = appendNumericObj.current.value / 5;
    };
    const prependTemplate = () => {
        return (<>
            <span className="e-icons e-menu"></span><span className="e-input-separator"></span><span className="e-icons e-search"></span><span className="e-input-separator"></span>
        </>);
    };
    const appendTemplate = () => {
        return (<>
            <span>kg</span>
        </>);
    };
    const prependIconTemplate = () => {
        const handleResetClick = () => {
            iconNumericObj.current.value = null;
        };
        return (<>
            <span className="e-icons e-reset" title="Reset" onClick={handleResetClick}></span><span className="e-input-separator"></span>
        </>);
    };
    const appendIconTemplate = () => {
        const handleSubractClick = () => {
            iconNumericObj.current.value = iconNumericObj.current.value - 1;
        };
        const handlePlusClick = () => {
            iconNumericObj.current.value = iconNumericObj.current.value + 1;
        };
        return (<>
            <span className="e-input-separator"></span><span className="e-icons e-horizontal-line" onClick={handleSubractClick}></span><span className="e-input-separator"></span><span className="e-icons e-plus" onClick={handlePlusClick}></span>
        </>);
    };
    return (<div className='control-pane'>
            <div className="col-lg-12 control-section">
                <div className="content-wrapper sample-numeric-icon">
                    <div className="row custom-margin">
                        <NumericTextBoxComponent ref={prepenNumericObj} floatLabelType='Auto' cssClass='e-prepend-numeric' value={1} placeholder='Enter the price' prependTemplate={prependTemplate} change={onPriceChange}/>
                    </div>
                    <div className="row custom-margin">
                        <NumericTextBoxComponent ref={appendNumericObj} floatLabelType='Auto' step={1} value={5} placeholder='Enter the kg' appendTemplate={appendTemplate} change={onKgChange}/>
                    </div>
                    <div className="row custom-margin-row">
                        <NumericTextBoxComponent ref={iconNumericObj} floatLabelType='Auto' placeholder='Enter the Number' value={10} showSpinButton={false} prependTemplate={prependIconTemplate} appendTemplate={appendIconTemplate}/>
                    </div>
                </div>
            </div>
        </div>);
};
ReactDOM.render(<App />,document.getElementById('sample'));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { useRef } from 'react';
import { NumericTextBoxComponent } from '@syncfusion/ej2-react-inputs';

function App(){
  const iconNumericObj = useRef<NumericTextBoxComponent>(null);
  const prepenNumericObj = useRef<NumericTextBoxComponent>(null);
  const appendNumericObj = useRef<NumericTextBoxComponent>(null);

  const onPriceChange = (): void => {
    if (appendNumericObj.current && prepenNumericObj.current) {
      appendNumericObj.current.value = 
        (prepenNumericObj.current.value as number) * 5;
    }
  };

  const onKgChange = (): void => {
    if (prepenNumericObj.current && appendNumericObj.current) {
      prepenNumericObj.current.value = 
        (appendNumericObj.current.value as number) / 5;
    }
  };

  const prependTemplate = () => {
    return (
      <>
        <span className="e-icons e-menu"></span>
        <span className="e-input-separator"></span>
        <span className="e-icons e-search"></span>
        <span className="e-input-separator"></span>
      </>
    );
  };

  const appendTemplate = () => {
    return (
      <>
        <span>kg</span>
      </>
    );
  };

  const prependIconTemplate = () => {
    const handleResetClick = (): void => {
      if (iconNumericObj.current) {
        iconNumericObj.current.value = null;
      }
    };
    return (
      <>
        <span
          className="e-icons e-reset"
          title="Reset"
          onClick={handleResetClick}
        ></span>
        <span className="e-input-separator"></span>
      </>
    );
  };

  const appendIconTemplate = () => {
    const handleSubractClick = (): void => {
      if (iconNumericObj.current) {
        iconNumericObj.current.value = 
          (iconNumericObj.current.value as number) - 1;
      }
    };

    const handlePlusClick = (): void => {
      if (iconNumericObj.current) {
        iconNumericObj.current.value = 
          (iconNumericObj.current.value as number) + 1;
      }
    };

    return (
      <>
        <span className="e-input-separator"></span>
        <span
          className="e-icons e-horizontal-line"
          onClick={handleSubractClick}
        ></span>
        <span className="e-input-separator"></span>
        <span className="e-icons e-plus" onClick={handlePlusClick}></span>
      </>
    );
  };

  return (
    <div className="control-pane">
      <div className="col-lg-12 control-section">
        <div className="content-wrapper sample-numeric-icon">
          <div className="row custom-margin">
            <NumericTextBoxComponent
              ref={prepenNumericObj}
              floatLabelType="Auto"
              cssClass="e-prepend-numeric"
              value={1}
              placeholder="Enter the price"
              prependTemplate={prependTemplate}
              change={onPriceChange}
            />
          </div>
          <div className="row custom-margin">
            <NumericTextBoxComponent
              ref={appendNumericObj}
              floatLabelType="Auto"
              step={1}
              value={5}
              placeholder="Enter the kg"
              appendTemplate={appendTemplate}
              change={onKgChange}
            />
          </div>
          <div className="row custom-margin-row">
            <NumericTextBoxComponent
              ref={iconNumericObj}
              floatLabelType="Auto"
              placeholder="Enter the Number"
              value={10}
              showSpinButton={false}
              prependTemplate={prependIconTemplate}
              appendTemplate={appendIconTemplate}
            />
          </div>
        </div>
      </div>
    </div>
  );
};
ReactDOM.render(<App />,document.getElementById('sample'));

You can view the demo here: NumericTextBox Adornments demo.