Adornments in EJ2 React MaskedTextBox control

21 Feb 202611 minutes to read

Adornments in the MaskedTextBox allow you to add custom elements before or after the masked input using the prependTemplate and appendTemplate properties. These elements can include prefixes, suffixes, labels, or action icons to provide context, guide input, and enable 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. These templates do not alter mask behavior and support any inline HTML or icon.

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

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

[Class-component]

app.jsx

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

app.tsx

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

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

app.tsx

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

You can view the demo here: MaskedTextBox Adornments demo.