Adornments in React TextBox component

21 Feb 202624 minutes to read

Enhance the TextBox component with prepended or appended visual elements using prependTemplate and appendTemplate properties. Adornments include icons, text labels, or interactive buttons that provide visual context and improve the user input experience.

Overview and Use Cases

Adornments serve multiple purposes in modern form design:

Visual Indicators: Icons that clarify the expected input type (e.g., user icon for username, envelope icon for email)
Functional Enhancement: Action buttons such as password visibility toggles or clear input buttons
Validation Feedback: Icons indicating input validity or error states
Unit Display: Currency symbols, measurement units, or domain extensions (e.g., “@domain.com” for email fields)
Accessibility Support: Visual and interactive cues that enhance discoverability and usability for all users

Adding Adornments to TextBox

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

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

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

[Class-component]

app.jsx
app.tsx
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { TextBoxComponent } from '@syncfusion/ej2-react-inputs';

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.appendTextboxObj = React.createRef();
    this.iconTextboxObj = React.createRef();
  }

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

  appendTemplate = () => {
    const handleClick = (e) => {
      let textIcon = e.target;
      if (textIcon) {
        if (this.appendTextboxObj.current.type === 'text') {
          this.appendTextboxObj.current.type = 'Password';
          textIcon.className = 'e-icons e-eye-slash';
        } else {
          this.appendTextboxObj.current.type = 'text';
          textIcon.className = 'e-icons e-eye';
        }
      }
    };
    return (
      <>
        <span className="e-input-separator"></span>
        <span
          id="text-icon"
          className="e-icons e-eye"
          onClick={handleClick}
        ></span>
      </>
    );
  };

  prependIconTemplate = () => {
    return (
      <>
        <span className="e-icons e-people"></span>
        <span className="e-input-separator"></span>
      </>
    );
  };

  appendIconTemplate = () => {
    const handleDeleteClick = () => {
      this.iconTextboxObj.current.value = '';
    };
    return (
      <>
        <span>.com</span>
        <span className="e-input-separator"></span>
        <span
          className="e-icons e-trash"
          onClick={handleDeleteClick}
        ></span>
      </>
    );
  };

  render() {
    return (
      <div className='control-pane'>
        <div className='col-lg-12 control-section adornment-textbox'>
          <div className="content-wrapper sample-icon">
            <div className="row">
              <TextBoxComponent
                placeholder="Enter your Name"
                cssClass="e-prepend-textbox"
                floatLabelType="Auto"
                prependTemplate={this.prependTemplate}
              />
            </div>
            <div className="row">
              <TextBoxComponent
                ref={this.appendTextboxObj}
                placeholder="Password"
                floatLabelType="Auto"
                cssClass="e-eye-icon"
                appendTemplate={this.appendTemplate}
              />
            </div>
            <div className="row custom-margin-row">
              <TextBoxComponent
                ref={this.iconTextboxObj}
                placeholder="Enter the Mail Address"
                cssClass="e-icon-textbox"
                floatLabelType="Auto"
                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 { TextBoxComponent } from '@syncfusion/ej2-react-inputs';

interface AdornmentsState {}

export default class App extends React.Component<{}, AdornmentsState> {
  private appendTextboxObj = React.createRef<TextBoxComponent>();
  private iconTextboxObj = React.createRef<TextBoxComponent>();

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

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

  appendTemplate = (): React.ReactNode => {
    const handleClick = (e: React.MouseEvent<HTMLSpanElement>): void => {
      const textIcon = e.target as HTMLSpanElement;
      if (textIcon && this.appendTextboxObj.current) {
        if (this.appendTextboxObj.current.type === 'text') {
          this.appendTextboxObj.current.type = 'Password';
          textIcon.className = 'e-icons e-eye-slash';
        } else {
          this.appendTextboxObj.current.type = 'text';
          textIcon.className = 'e-icons e-eye';
        }
      }
    };
    return (
      <>
        <span className="e-input-separator"></span>
        <span
          id="text-icon"
          className="e-icons e-eye"
          onClick={handleClick}
        ></span>
      </>
    );
  };

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

  appendIconTemplate = (): React.ReactNode => {
    const handleDeleteClick = (): void => {
      if (this.iconTextboxObj.current) {
        this.iconTextboxObj.current.value = '';
      }
    };
    return (
      <>
        <span>.com</span>
        <span className="e-input-separator"></span>
        <span
          className="e-icons e-trash"
          onClick={handleDeleteClick}
        ></span>
      </>
    );
  };

  render(): React.ReactNode {
    return (
      <div className='control-pane'>
        <div className='col-lg-12 control-section adornment-textbox'>
          <div className="content-wrapper sample-icon">
            <div className="row">
              <TextBoxComponent
                placeholder="Enter your Name"
                cssClass="e-prepend-textbox"
                floatLabelType="Auto"
                prependTemplate={this.prependTemplate}
              />
            </div>
            <div className="row">
              <TextBoxComponent
                ref={this.appendTextboxObj}
                placeholder="Password"
                floatLabelType="Auto"
                cssClass="e-eye-icon"
                appendTemplate={this.appendTemplate}
              />
            </div>
            <div className="row custom-margin-row">
              <TextBoxComponent
                ref={this.iconTextboxObj}
                placeholder="Enter the Mail Address"
                cssClass="e-icon-textbox"
                floatLabelType="Auto"
                prependTemplate={this.prependIconTemplate}
                appendTemplate={this.appendIconTemplate}
              />
            </div>
          </div>
        </div>
      </div>
    );
  }
}
ReactDOM.render(<App />,document.getElementById('sample'));

You can view the demo here: TextBox Adornments demo.

[Functional-component]

app.jsx
app.tsx
import * as React from "react";
import * as ReactDOM from "react-dom";
import { TextBoxComponent } from '@syncfusion/ej2-react-inputs';

function App() {
  const appendTextboxRef = React.useRef(null);
  const iconTextboxRef = React.useRef(null);

  const prependTemplate = () => (
    <>
      <span className="e-icons e-user"></span>
      <span className="e-input-separator"></span>
    </>
  );

  const appendTemplate = () => {
    const handleClick = (e) => {
      const textIcon = e.target;
      const inst = appendTextboxRef.current;
      if (!inst) return;

      if (inst.type === 'text') {
        inst.type = 'password';
        inst.dataBind();
        textIcon.className = 'e-icons e-eye-slash';
      } else {
        inst.type = 'text';
        inst.dataBind();
        textIcon.className = 'e-icons e-eye';
      }
    };

    return (
      <>
        <span className="e-input-separator"></span>
        <span id="text-icon" className="e-icons e-eye" onClick={handleClick}></span>
      </>
    );
  };

  const prependIconTemplate = () => (
    <>
      <span className="e-icons e-people"></span>
      <span className="e-input-separator"></span>
    </>
  );

  const appendIconTemplate = () => {
    const handleDeleteClick = () => {
      const inst = iconTextboxRef.current;
      if (!inst) return;
      inst.value = '';
      inst.dataBind();
    };
    return (
      <>
        <span>.com</span>
        <span className="e-input-separator"></span>
        <span className="e-icons e-trash" onClick={handleDeleteClick}></span>
      </>
    );
  };

  return (
    <div className='control-pane'>
      <div className='col-lg-12 control-section adornment-textbox'>
        <div className="content-wrapper sample-icon">
          <div className="row">
            <TextBoxComponent
              placeholder="Enter your Name"
              cssClass="e-prepend-textbox"
              floatLabelType="Auto"
              prependTemplate={prependTemplate}
            />
          </div>

          <div className="row">
            <TextBoxComponent
              ref={appendTextboxRef}
              placeholder="Password"
              type="password"
              floatLabelType="Auto"
              cssClass="e-eye-icon"
              appendTemplate={appendTemplate}
            />
          </div>

          <div className="row custom-margin-row">
            <TextBoxComponent
              ref={iconTextboxRef}
              placeholder="Enter the Mail Address"
              cssClass="e-icon-textbox"
              floatLabelType="Auto"
              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 { TextBoxComponent } from '@syncfusion/ej2-react-inputs';

function App() {
  const appendTextboxObj = React.useRef<TextBoxComponent>(null);
  const iconTextboxObj = React.useRef<TextBoxComponent>(null);

  const prependTemplate = () => (
    <>
      <span className="e-icons e-user"></span>
      <span className="e-input-separator"></span>
    </>
  );

  const appendTemplate = () => {
    const handleClick = (e: React.MouseEvent<HTMLSpanElement>) => {
      const textIcon = e.currentTarget;
      if (appendTextboxObj.current) {
        if (appendTextboxObj.current.type === 'text') {
          appendTextboxObj.current.type = 'Password';
          textIcon.className = 'e-icons e-eye-slash';
        } else {
          appendTextboxObj.current.type = 'text';
          textIcon.className = 'e-icons e-eye';
        }
      }
    };
    return (
      <>
        <span className="e-input-separator"></span>
        <span id="text-icon" className="e-icons e-eye" onClick={handleClick}></span>
      </>
    );
  };

  const prependIconTemplate = () => (
    <>
      <span className="e-icons e-people"></span>
      <span className="e-input-separator"></span>
    </>
  );

  const appendIconTemplate = () => {
    const handleDeleteClick = () => {
      if (iconTextboxObj.current) {
        iconTextboxObj.current.value = '';
      }
    };
    return (
      <>
        <span>.com</span>
        <span className="e-input-separator"></span>
        <span className="e-icons e-trash" onClick={handleDeleteClick}></span>
      </>
    );
  };
  return (
    <div className="control-pane">
      <div className="col-lg-12 control-section adornment-textbox">
        <div className="content-wrapper sample-icon">
          <div className="row">
            <TextBoxComponent
              placeholder="Enter your Name"
              cssClass="e-prepend-textbox"
              floatLabelType="Auto"
              prependTemplate={prependTemplate}
            />
          </div>
          <div className="row">
            <TextBoxComponent
              ref={appendTextboxObj}
              placeholder="Password"
              floatLabelType="Auto"
              cssClass="e-eye-icon"
              appendTemplate={appendTemplate}
            />
          </div>
          <div className="row custom-margin-row">
            <TextBoxComponent
              ref={iconTextboxObj}
              placeholder="Enter the Mail Address"
              cssClass="e-icon-textbox"
              floatLabelType="Auto"
              prependTemplate={prependIconTemplate}
              appendTemplate={appendIconTemplate}
            />
          </div>
        </div>
      </div>
    </div>
  );
}

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

You can view the demo here: TextBox Adornments demo.

Search docs

Ask HelpBot

Search docs

Ask HelpBot

How can I help you?

Adornments in React TextBox component

Overview and Use Cases

Adding Adornments to TextBox