Adornments in EJ2 React TextArea control
28 Dec 202524 minutes to read
Adornments allow you to add custom elements before or after the TextArea using the prependTemplate and appendTemplate properties. These elements can include icons, text labels, or action buttons for formatting and content management. With orientation support, you can arrange adornments horizontally or vertically using adornmentFlow and adornmentOrientation for flexible layouts.
Common Use Cases
- Visual Indicators: Icons for context (e.g., edit, comment).
- Formatting Tools: Buttons for bold, italic, underline.
- Content Actions: Save, clear, or submit buttons.
- Validation & Status: Character count or error icons.
- Flexible Layout: Horizontal or vertical adornment flow.
Adding Adornments with Orientation to TextArea
Use prependTemplate and appendTemplate to add custom HTML content before and after the TextArea.
-
prependTemplate: Renders elements before the textarea. -
appendTemplate: Renders elements after the textarea.
You can control how adornments are positioned and arranged using the adornmentFlow and adornmentOrientation properties. Both properties accept only Horizontal or Vertical values defined in the AdornmentsDirection type.
-
adornmentFlow: Defines where adornments appear around the TextArea.- Horizontal: Prepend on the left, append on the right.
- Vertical: Prepend above, append below.
-
adornmentOrientation: Defines how items inside each adornment are arranged.- Horizontal: Items displayed in a row.
- Vertical: Items displayed in a column.
The following example demonstrates how to add adornments with orientation in the TextArea control.
[Class-component]
import * as React from "react";
import * as ReactDOM from "react-dom";
import { Component } from 'react';
import { TextAreaComponent } from '@syncfusion/ej2-react-inputs';
export default class App extends Component {
constructor(props) {
super(props);
this.rows = 5;
this.cols = 250;
this.cols2 = 500;
}
floatFocus = (args) => {
args.target.parentElement.classList.add('e-input-focus');
};
floatBlur = (args) => {
args.target.parentElement.classList.remove('e-input-focus');
};
render() {
return (
<div className='control-pane'>
<div id="textarea-sample" className='control-section input-content-wrapper'>
<div className="row custom-margin material">
<div className="col-xs-6 col-sm-6 col-lg-6 col-md-6">
<b>Outlined and Filled</b>
</div>
</div>
<div className="row custom-margin custom-padding-5 material">
<div className="col-xs-6 col-sm-6 col-lg-6 col-md-6">
<TextAreaComponent
placeholder="Outlined"
cssClass="e-outline"
floatLabelType="Auto"
rows={this.rows}
cols={this.cols}
/>
</div>
<div className="col-xs-6 col-sm-6 col-lg-6 col-md-6">
<TextAreaComponent
placeholder="Filled"
cssClass="e-filled"
floatLabelType="Auto"
rows={this.rows}
cols={this.cols}
/>
</div>
</div>
<div className="row custom-margin">
<div className="col-xs-6 col-sm-6 col-lg-6 col-md-6">
<b>Please leave a comment</b>
</div>
</div>
<div className="row custom-margin">
<div className="col-xs-12 col-sm-12 col-lg-12 col-md-12">
<TextAreaComponent
placeholder="Enter your comments"
floatLabelType="Auto"
rows={this.rows}
cols={this.cols2}
/>
</div>
</div>
<div className="row custom-margin">
<div className="col-xs-6 col-sm-6 col-lg-6 col-md-6">
<b>Validation States</b>
</div>
</div>
<div className="row custom-margin">
<div className="col-xs-4 col-sm-4 col-lg-4 col-md-4">
<div className="e-input-group e-success">
<textarea
className="e-input"
onFocus={this.floatFocus}
onBlur={this.floatBlur}
placeholder="Success"
rows={this.rows}
cols={this.cols}
/>
</div>
</div>
<div className="col-xs-4 col-sm-4 col-lg-4 col-md-4">
<div className="e-input-group e-warning">
<textarea
className="e-input"
onFocus={this.floatFocus}
onBlur={this.floatBlur}
placeholder="Warning"
rows={this.rows}
cols={this.cols}
/>
</div>
</div>
<div className="col-xs-4 col-sm-4 col-lg-4 col-md-4">
<div className="e-input-group e-error">
<textarea
className="e-input"
onFocus={this.floatFocus}
onBlur={this.floatBlur}
placeholder="Error"
rows={this.rows}
cols={this.cols}
/>
</div>
</div>
</div>
</div>
</div>
);
}
}
ReactDOM.render(<App />,document.getElementById('sample'));import * as React from "react";
import * as ReactDOM from "react-dom";
import { Component, FocusEvent } from 'react';
import { TextAreaComponent } from '@syncfusion/ej2-react-inputs';
interface TextAreaEvent extends FocusEvent<HTMLTextAreaElement> {
target: HTMLTextAreaElement;
}
export default class App extends Component {
private rows: number = 5;
private cols: number = 250;
private cols2: number = 500;
floatFocus = (args: TextAreaEvent): void => {
args.target.parentElement?.classList.add('e-input-focus');
};
floatBlur = (args: TextAreaEvent): void => {
args.target.parentElement?.classList.remove('e-input-focus');
};
render() {
return (
<div className='control-pane'>
<div id="textarea-sample" className='control-section input-content-wrapper'>
<div className="row custom-margin material">
<div className="col-xs-6 col-sm-6 col-lg-6 col-md-6">
<b>Outlined and Filled</b>
</div>
</div>
<div className="row custom-margin custom-padding-5 material">
<div className="col-xs-6 col-sm-6 col-lg-6 col-md-6">
<TextAreaComponent
placeholder="Outlined"
cssClass="e-outline"
floatLabelType="Auto"
rows={this.rows}
cols={this.cols}
/>
</div>
<div className="col-xs-6 col-sm-6 col-lg-6 col-md-6">
<TextAreaComponent
placeholder="Filled"
cssClass="e-filled"
floatLabelType="Auto"
rows={this.rows}
cols={this.cols}
/>
</div>
</div>
<div className="row custom-margin">
<div className="col-xs-6 col-sm-6 col-lg-6 col-md-6">
<b>Please leave a comment</b>
</div>
</div>
<div className="row custom-margin">
<div className="col-xs-12 col-sm-12 col-lg-12 col-md-12">
<TextAreaComponent
placeholder="Enter your comments"
floatLabelType="Auto"
rows={this.rows}
cols={this.cols2}
/>
</div>
</div>
<div className="row custom-margin">
<div className="col-xs-6 col-sm-6 col-lg-6 col-md-6">
<b>Validation States</b>
</div>
</div>
<div className="row custom-margin">
<div className="col-xs-4 col-sm-4 col-lg-4 col-md-4">
<div className="e-input-group e-success">
<textarea
className="e-input"
onFocus={this.floatFocus}
onBlur={this.floatBlur}
placeholder="Success"
rows={this.rows}
cols={this.cols}
/>
</div>
</div>
<div className="col-xs-4 col-sm-4 col-lg-4 col-md-4">
<div className="e-input-group e-warning">
<textarea
className="e-input"
onFocus={this.floatFocus}
onBlur={this.floatBlur}
placeholder="Warning"
rows={this.rows}
cols={this.cols}
/>
</div>
</div>
<div className="col-xs-4 col-sm-4 col-lg-4 col-md-4">
<div className="e-input-group e-error">
<textarea
className="e-input"
onFocus={this.floatFocus}
onBlur={this.floatBlur}
placeholder="Error"
rows={this.rows}
cols={this.cols}
/>
</div>
</div>
</div>
</div>
</div>
);
}
}
ReactDOM.render(<App />,document.getElementById('sample'));You can view the demo here: TextArea Adornments demo.
[Functional-component]
import * as React from "react";
import * as ReactDOM from "react-dom";
import { TextAreaComponent } from '@syncfusion/ej2-react-inputs';
function App() {
const rows = 5;
const cols = 250;
const cols2 = 500;
const floatFocus = (args) => {
args.target.parentElement.classList.add('e-input-focus');
};
const floatBlur = (args) => {
args.target.parentElement.classList.remove('e-input-focus');
};
return (
<div className='control-pane'>
<div id="textarea-sample" className='control-section input-content-wrapper'>
<div className="row custom-margin material">
<div className="col-xs-6 col-sm-6 col-lg-6 col-md-6">
<b>Outlined and Filled</b>
</div>
</div>
<div className="row custom-margin custom-padding-5 material">
<div className="col-xs-6 col-sm-6 col-lg-6 col-md-6">
<TextAreaComponent
placeholder="Outlined"
cssClass="e-outline"
floatLabelType="Auto"
rows={rows}
cols={cols}
/>
</div>
<div className="col-xs-6 col-sm-6 col-lg-6 col-md-6">
<TextAreaComponent
placeholder="Filled"
cssClass="e-filled"
floatLabelType="Auto"
rows={rows}
cols={cols}
/>
</div>
</div>
<div className="row custom-margin">
<div className="col-xs-6 col-sm-6 col-lg-6 col-md-6">
<b>Please leave a comment</b>
</div>
</div>
<div className="row custom-margin">
<div className="col-xs-12 col-sm-12 col-lg-12 col-md-12">
<TextAreaComponent
placeholder="Enter your comments"
floatLabelType="Auto"
rows={rows}
cols={cols2}
/>
</div>
</div>
<div className="row custom-margin">
<div className="col-xs-6 col-sm-6 col-lg-6 col-md-6">
<b>Validation States</b>
</div>
</div>
<div className="row custom-margin">
<div className="col-xs-4 col-sm-4 col-lg-4 col-md-4">
<div className="e-input-group e-success">
<textarea
className="e-input"
onFocus={floatFocus}
onBlur={floatBlur}
placeholder="Success"
rows={rows}
cols={cols}
/>
</div>
</div>
<div className="col-xs-4 col-sm-4 col-lg-4 col-md-4">
<div className="e-input-group e-warning">
<textarea
className="e-input"
onFocus={floatFocus}
onBlur={floatBlur}
placeholder="Warning"
rows={rows}
cols={cols}
/>
</div>
</div>
<div className="col-xs-4 col-sm-4 col-lg-4 col-md-4">
<div className="e-input-group e-error">
<textarea
className="e-input"
onFocus={floatFocus}
onBlur={floatBlur}
placeholder="Error"
rows={rows}
cols={cols}
/>
</div>
</div>
</div>
</div>
</div>
);
};
ReactDOM.render(<App />,document.getElementById('sample'));import * as React from "react";
import * as ReactDOM from "react-dom";
import { FC, FocusEvent } from 'react';
import { TextAreaComponent } from '@syncfusion/ej2-react-inputs';
function App(){
const rows: number = 5;
const cols: number = 250;
const cols2: number = 500;
const floatFocus = (args: FocusEvent<HTMLTextAreaElement>): void => {
args.target.parentElement?.classList.add('e-input-focus');
};
const floatBlur = (args: FocusEvent<HTMLTextAreaElement>): void => {
args.target.parentElement?.classList.remove('e-input-focus');
};
return (
<div className='control-pane'>
<div id="textarea-sample" className='control-section input-content-wrapper'>
<div className="row custom-margin material">
<div className="col-xs-6 col-sm-6 col-lg-6 col-md-6">
<b>Outlined and Filled</b>
</div>
</div>
<div className="row custom-margin custom-padding-5 material">
<div className="col-xs-6 col-sm-6 col-lg-6 col-md-6">
<TextAreaComponent
placeholder="Outlined"
cssClass="e-outline"
floatLabelType="Auto"
rows={rows}
cols={cols}
/>
</div>
<div className="col-xs-6 col-sm-6 col-lg-6 col-md-6">
<TextAreaComponent
placeholder="Filled"
cssClass="e-filled"
floatLabelType="Auto"
rows={rows}
cols={cols}
/>
</div>
</div>
<div className="row custom-margin">
<div className="col-xs-6 col-sm-6 col-lg-6 col-md-6">
<b>Please leave a comment</b>
</div>
</div>
<div className="row custom-margin">
<div className="col-xs-12 col-sm-12 col-lg-12 col-md-12">
<TextAreaComponent
placeholder="Enter your comments"
floatLabelType="Auto"
rows={rows}
cols={cols2}
/>
</div>
</div>
<div className="row custom-margin">
<div className="col-xs-6 col-sm-6 col-lg-6 col-md-6">
<b>Validation States</b>
</div>
</div>
<div className="row custom-margin">
<div className="col-xs-4 col-sm-4 col-lg-4 col-md-4">
<div className="e-input-group e-success">
<textarea
className="e-input"
onFocus={floatFocus}
onBlur={floatBlur}
placeholder="Success"
rows={rows}
cols={cols}
/>
</div>
</div>
<div className="col-xs-4 col-sm-4 col-lg-4 col-md-4">
<div className="e-input-group e-warning">
<textarea
className="e-input"
onFocus={floatFocus}
onBlur={floatBlur}
placeholder="Warning"
rows={rows}
cols={cols}
/>
</div>
</div>
<div className="col-xs-4 col-sm-4 col-lg-4 col-md-4">
<div className="e-input-group e-error">
<textarea
className="e-input"
onFocus={floatFocus}
onBlur={floatBlur}
placeholder="Error"
rows={rows}
cols={cols}
/>
</div>
</div>
</div>
</div>
</div>
);
};
ReactDOM.render(<App />,document.getElementById('sample'));You can view the demo here: TextArea Adornments demo.