Adornments in EJ2 React MaskedTextBox control

28 Dec 202510 minutes to read

Adornments in the MaskedTextBox control allow you to add custom elements before or after the masked input using the prependTemplate and appendTemplate properties. These elements can include prefixes, suffix labels, or action icons to provide context, guide user input, and offer quick actions while preserving mask validation and float label behavior.

Common Use Cases

Entry Guidance: Add icons/text to hint the expected input (e.g., user icon for username/login).
Quick Actions: Include buttons to submit, clear, or copy the masked value.
Context Labels: Add static prefixes/suffixes like country code, domain, or unit suffix.
Visual Feedback: Show status indicators without interfering with the mask.

Adding Adornments to MaskedTextBox

Use prependTemplate and appendTemplate to inject HTML content before and after the masked input respectively. These templates do not alter mask behavior and support any inline HTML or icon.

prependTemplate: Renders elements before the masked input.
appendTemplate: Renders elements after the masked input.

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

[Class-component]

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

export default class App extends React.Component {
  prependTemplate = () => {
    return (
      <>
        <span className="e-icons e-user"></span>
        <span className="e-input-separator"></span>
      </>
    );
  };

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

  render() {
    return (
      <div className="control-pane">
        <div className="control-section">
          <div className="content-wrapper">
            <div className="mask-row">
              <MaskedTextBoxComponent
                mask="000-000-0000"
                promptChar="#"
                cssClass="e-prepend-mask"
                placeholder="Enter phone number"
                floatLabelType="Auto"
                prependTemplate={this.prependTemplate}
                appendTemplate={this.appendTemplate}
              />
            </div>
          </div>
        </div>
      </div>
    );
  }
}
ReactDOM.render(<App />,document.getElementById('sample'));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MaskedTextBoxComponent } from '@syncfusion/ej2-react-inputs';

type Props = Record<string, never>;
type State = Record<string, never>;

export default class App extends React.Component<Props, State> {
  // Arrow methods ensure correct `this` context
  private prependTemplate = (): React.ReactNode => {
    return (
      <>
        <span className="e-icons e-user"></span>
        <span className="e-input-separator"></span>
      </>
    );
  };

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

  render(): React.ReactNode {
    return (
      <div className="control-pane">
        <div className="control-section">
          <div className="content-wrapper">
            <div className="mask-row">
              <MaskedTextBoxComponent
                mask="000-000-0000"
                promptChar="#"
                cssClass="e-prepend-mask"
                placeholder="Enter phone number"
                floatLabelType="Auto"
                prependTemplate={this.prependTemplate}
                appendTemplate={this.appendTemplate}
              />
            </div>
          </div>
        </div>
      </div>
    );
  }
}
ReactDOM.render(<App />,document.getElementById('sample'));

You can view the demo here: MaskedTextBox Adornments demo.

[Functional-component]

app.jsx
app.tsx
import * as React from "react";
import * as ReactDOM from "react-dom";
import { useEffect } from 'react';

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

function App() {
    const prependTemplate = () => {
        return (<>
            <span className="e-icons e-user"></span><span className="e-input-separator"></span>
        </>);
    };
    const appendTemplate = () => {
        return (<>
            <span className="e-input-separator"></span><span className="e-icons e-send"></span>
        </>);
    };
    return (<div className='control-pane'>
            <div className="control-section">
                <div className="content-wrapper">
                    <div className="mask-row">
                        <MaskedTextBoxComponent mask='000-000-0000' promptChar='#' cssClass='e-prepend-mask' placeholder='Enter phone number' floatLabelType='Auto' prependTemplate={prependTemplate} appendTemplate={appendTemplate}></MaskedTextBoxComponent>
                    </div>
                </div>
            </div>
        </div>);
};

ReactDOM.render(<App />,document.getElementById('sample'));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MaskedTextBoxComponent } from '@syncfusion/ej2-react-inputs';

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

  const appendTemplate = (): React.ReactNode => (
    <>
      <span className="e-input-separator"></span>
      <span className="e-icons e-send"></span>
    </>
  );

  return (
    <div className="control-pane">
      <div className="control-section">
        <div className="content-wrapper">
          <div className="mask-row">
            <MaskedTextBoxComponent
              mask="000-000-0000"
              promptChar="#"
              cssClass="e-prepend-mask"
              placeholder="Enter phone number"
              floatLabelType="Auto"
              prependTemplate={prependTemplate}
              appendTemplate={appendTemplate}
            />
          </div>
        </div>
      </div>
    </div>
  );
};

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