Multiline in React TextBox component
21 Oct 202424 minutes to read
This feature allows the TextBox to accept one or more lines of text like address, description, comments, and more.
Create multiline TextBox
You can convert the default TextBox into the multiline TextBox by setting the multiline API value as true or pass HTML5 textarea as element to the TextBox.
The multiline TextBox allows you to resize it in vertical direction alone.
[Class-component]
import { TextBoxComponent } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import * as ReactDOM from "react-dom";
export default class App extends React.Component {
render() {
return (<div className="multiline">
<TextBoxComponent multiline={true} placeholder='Enter your address' value='Mr. Dodsworth Dodsworth, System Analyst, Studio 103, The Business Center'/>
</div>);
}
}
ReactDOM.render(<App />, document.getElementById('default'));import { TextBoxComponent } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import * as ReactDOM from "react-dom";
export default class App extends React.Component<{}, {}> {
public render() {
return (
<div className="multiline">
<TextBoxComponent multiline={true} placeholder='Enter your address' value= 'Mr. Dodsworth Dodsworth, System Analyst, Studio 103, The Business Center'/>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('default'));[Functional-component]
import { TextBoxComponent } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import * as ReactDOM from "react-dom";
function App() {
return (<div className="multiline">
<TextBoxComponent multiline={true} placeholder='Enter your address' value='Mr. Dodsworth Dodsworth, System Analyst, Studio 103, The Business Center'/>
</div>);
}
ReactDOM.render(<App />, document.getElementById('default'));import { TextBoxComponent } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import * as ReactDOM from "react-dom";
function App() {
return (
<div className="multiline">
<TextBoxComponent multiline={true} placeholder='Enter your address' value= 'Mr. Dodsworth Dodsworth, System Analyst, Studio 103, The Business Center'/>
</div>
);
}
ReactDOM.render(<App />, document.getElementById('default'));Implementing floating label
You can achieve the floating label behavior in the multiline TextBox by setting floatLabelType as ‘Auto’. The placeholder text act as floating label to the multiline TextBox. You can provide the placeholder text to the multiline TextBox either by using the placeholder property or placeholder attribute.
[Class-component]
import { TextBoxComponent } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import * as ReactDOM from "react-dom";
export default class App extends React.Component {
render() {
return (<div className="multiline">
<label className='label'>Float label type Auto</label>
<TextBoxComponent multiline={true} placeholder='Enter your address' floatLabelType='Auto'/>
<label className='label'>Float label type Always</label>
<TextBoxComponent multiline={true} placeholder='Enter your address' floatLabelType='Always'/>
<label className='label'>Float label type Never</label>
<TextBoxComponent multiline={true} placeholder='Enter your address' floatLabelType='Never'/>
</div>);
}
}
ReactDOM.render(<App />, document.getElementById('default'));import { TextBoxComponent } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import * as ReactDOM from "react-dom";
export default class App extends React.Component<{}, {}> {
public render() {
return (
<div className="multiline">
<label className='label'>Float label type Auto</label>
<TextBoxComponent multiline={true} placeholder='Enter your address' floatLabelType='Auto'/>
<label className='label'>Float label type Always</label>
<TextBoxComponent multiline={true} placeholder='Enter your address' floatLabelType='Always'/>
<label className='label'>Float label type Never</label>
<TextBoxComponent multiline={true} placeholder='Enter your address' floatLabelType='Never'/>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('default'));[Functional-component]
import { TextBoxComponent } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import * as ReactDOM from "react-dom";
function App() {
return (<div className="multiline">
<label className='label'>Float label type Auto</label>
<TextBoxComponent multiline={true} placeholder='Enter your address' floatLabelType='Auto'/>
<label className='label'>Float label type Always</label>
<TextBoxComponent multiline={true} placeholder='Enter your address' floatLabelType='Always'/>
<label className='label'>Float label type Never</label>
<TextBoxComponent multiline={true} placeholder='Enter your address' floatLabelType='Never'/>
</div>);
}
ReactDOM.render(<App />, document.getElementById('default'));import { TextBoxComponent } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import * as ReactDOM from "react-dom";
function App() {
return (
<div className="multiline">
<label className='label'>Float label type Auto</label>
<TextBoxComponent multiline={true} placeholder='Enter your address' floatLabelType='Auto'/>
<label className='label'>Float label type Always</label>
<TextBoxComponent multiline={true} placeholder='Enter your address' floatLabelType='Always'/>
<label className='label'>Float label type Never</label>
<TextBoxComponent multiline={true} placeholder='Enter your address' floatLabelType='Never'/>
</div>
);
}
ReactDOM.render(<App />, document.getElementById('default'));Auto resizing
By default, you can manually resize the multiline TextBox. But you can also create an auto resizing multiline TextBox with both the initial and dynamic value change. It can be done by calculating the height of the textarea in the created event for initial value update and in the input event for dynamic value update of the auto resize multiline TextBox, as explained in the following code sample.
[Class-component]
import { TextBoxComponent } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import * as ReactDOM from "react-dom";
export default class App extends React.Component {
textBoxObj;
render() {
return (<div className="multiline">
<TextBoxComponent multiline={true} value='Mr. Dodsworth Dodsworth, System Analyst, Studio 103, The Business Center' input={this.onInput = this.onInput.bind(this)} created={this.onCreate = this.onCreate.bind(this)} placeholder='Enter your address' floatLabelType='Auto' ref={scope => { this.textBoxObj = scope; }}/>
</div>);
}
onCreate() {
this.textBoxObj.addAttributes({ rows: 1 });
this.textBoxObj.respectiveElement.style.height = "auto";
this.textBoxObj.respectiveElement.style.height = (this.textBoxObj.respectiveElement.scrollHeight) + "px";
}
onInput() {
this.textBoxObj.respectiveElement.style.height = "auto";
this.textBoxObj.respectiveElement.style.height = (this.textBoxObj.respectiveElement.scrollHeight) + "px";
}
}
ReactDOM.render(<App />, document.getElementById('default'));import { TextBoxComponent } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import * as ReactDOM from "react-dom";
export default class App extends React.Component<{}, {}> {
public textBoxObj: any;
public render() {
return (
<div className="multiline">
<TextBoxComponent multiline={true} value= 'Mr. Dodsworth Dodsworth, System Analyst, Studio 103, The Business Center' input={this.onInput = this.onInput.bind(this)} created={this.onCreate = this.onCreate.bind(this)} placeholder='Enter your address' floatLabelType='Auto' ref = {scope => {this.textBoxObj = scope }}/>
</div>
);
}
private onCreate(): void {
this.textBoxObj.addAttributes({rows: 1});
this.textBoxObj.respectiveElement.style.height = "auto";
this.textBoxObj.respectiveElement.style.height = (this.textBoxObj.respectiveElement .scrollHeight)+"px";
}
private onInput(): void {
this.textBoxObj.respectiveElement.style.height = "auto";
this.textBoxObj.respectiveElement.style.height = (this.textBoxObj.respectiveElement .scrollHeight)+"px";
}
}
ReactDOM.render(<App />, document.getElementById('default'));[Functional-component]
import { TextBoxComponent } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import * as ReactDOM from "react-dom";
function App() {
let textBoxObj;
return (<div className="multiline">
<TextBoxComponent multiline={true} value='Mr. Dodsworth Dodsworth, System Analyst, Studio 103, The Business Center' input={onInput = onInput.bind(this)} created={onCreate = onCreate.bind(this)} placeholder='Enter your address' floatLabelType='Auto' ref={scope => { textBoxObj = scope; }}/>
</div>);
function onCreate() {
textBoxObj.addAttributes({ rows: 1 });
textBoxObj.respectiveElement.style.height = "auto";
textBoxObj.respectiveElement.style.height = (textBoxObj.respectiveElement.scrollHeight) + "px";
}
function onInput() {
textBoxObj.respectiveElement.style.height = "auto";
textBoxObj.respectiveElement.style.height = (textBoxObj.respectiveElement.scrollHeight) + "px";
}
}
ReactDOM.render(<App />, document.getElementById('default'));import { TextBoxComponent } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import * as ReactDOM from "react-dom";
function App() {
let textBoxObj: any;
return (
<div className="multiline">
<TextBoxComponent multiline={true} value= 'Mr. Dodsworth Dodsworth, System Analyst, Studio 103, The Business Center' input={onInput = onInput.bind(this)} created={onCreate = onCreate.bind(this)} placeholder='Enter your address' floatLabelType='Auto' ref = {scope => {textBoxObj = scope }}/>
</div>
);
function onCreate(): void {
textBoxObj.addAttributes({rows: 1});
textBoxObj.respectiveElement.style.height = "auto";
textBoxObj.respectiveElement.style.height = (textBoxObj.respectiveElement .scrollHeight)+"px";
}
function onInput(): void {
textBoxObj.respectiveElement.style.height = "auto";
textBoxObj.respectiveElement.style.height = (textBoxObj.respectiveElement .scrollHeight)+"px";
}
}
ReactDOM.render(<App />, document.getElementById('default'));Disable resizing
By default, the multiline TextBox is rendered with resizable. You can disable the resize of the multiline TextBox by applying the following CSS styles.
textarea.e-input,
.e-float-input textarea,
.e-float-input.e-control-wrapper textarea,
.e-input-group textarea,
.e-input-group.e-control-wrapper textarea {
resize: none;
}[Class-component]
import { TextBoxComponent } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import * as ReactDOM from "react-dom";
export default class App extends React.Component {
render() {
return (<div className="multiline">
<TextBoxComponent name="disable" multiline={true} placeholder='Enter your address' floatLabelType='Auto' cssClass="sample"/>
</div>);
}
}
ReactDOM.render(<App />, document.getElementById('default'));import { TextBoxComponent } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import * as ReactDOM from "react-dom";
export default class App extends React.Component<{}, {}> {
public render() {
return (
<div className="multiline">
<TextBoxComponent name="disable" multiline={true} placeholder='Enter your address' floatLabelType='Auto' cssClass="sample"/>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('default'));[Functional-component]
import { TextBoxComponent } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import * as ReactDOM from "react-dom";
function App() {
return (<div className="multiline">
<TextBoxComponent name="disable" multiline={true} placeholder='Enter your address' floatLabelType='Auto' cssClass="sample"/>
</div>);
}
ReactDOM.render(<App />, document.getElementById('default'));import { TextBoxComponent } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import * as ReactDOM from "react-dom";
function App() {
return (
<div className="multiline">
<TextBoxComponent name="disable" multiline={true} placeholder='Enter your address' floatLabelType='Auto' cssClass="sample"/>
</div>
);
}
ReactDOM.render(<App />, document.getElementById('default'));Limit the text length
By default, the text length of the multiline TextBox is unlimited. You can limit the text length by setting the maxLength attribute using the addAttribute method.
[Class-component]
import { TextBoxComponent } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import * as ReactDOM from "react-dom";
export default class App extends React.Component {
textBoxObj;
render() {
return (<div className="multiline">
<label className="label">Add maxlength attribute through inline</label>
<TextBoxComponent multiline={true} maxLength={'15'} placeholder='Enter your address' floatLabelType='Auto'/>
<label className="label">Add maxlength attribute through addAttributes method</label>
<TextBoxComponent multiline={true} ref={scope => { this.textBoxObj = scope; }} placeholder='Enter your address' floatLabelType='Auto'/>
<button className='e-control e-btn' id='targetButton1' role='button' onClick={this.handleClick = this.handleClick.bind(this)}>Add max length</button>
</div>);
}
handleClick() {
this.textBoxObj.addAttributes({ maxlength: 15 });
}
}
ReactDOM.render(<App />, document.getElementById('default'));import { TextBoxComponent } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import * as ReactDOM from "react-dom";
export default class App extends React.Component<{}, {}> {
public textBoxObj: any;
public render() {
return (
<div className="multiline">
<label className="label">Add maxlength attribute through inline</label>
<TextBoxComponent multiline={true} maxLength={'15'} placeholder='Enter your address' floatLabelType='Auto'/>
<label className="label">Add maxlength attribute through addAttributes method</label>
<TextBoxComponent multiline={true} ref = {scope => {this.textBoxObj = scope }} placeholder='Enter your address' floatLabelType='Auto'/>
<button className='e-control e-btn' id='targetButton1' role='button' onClick={this.handleClick = this.handleClick.bind(this)} >Add max length</button>
</div>
);
}
private handleClick(): void {
this.textBoxObj.addAttributes({maxlength: 15});
}
}
ReactDOM.render(<App />, document.getElementById('default'));[Functional-component]
import { TextBoxComponent } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import * as ReactDOM from "react-dom";
function App() {
let textBoxObj;
return (<div className="multiline">
<label className="label">Add maxlength attribute through inline</label>
<TextBoxComponent multiline={true} maxLength={'15'} placeholder='Enter your address' floatLabelType='Auto'/>
<label className="label">Add maxlength attribute through addAttributes method</label>
<TextBoxComponent multiline={true} ref={scope => { textBoxObj = scope; }} placeholder='Enter your address' floatLabelType='Auto'/>
<button className='e-control e-btn' id='targetButton1' role='button' onClick={handleClick = handleClick.bind(this)}>Add max length</button>
</div>);
function handleClick() {
textBoxObj.addAttributes({ maxlength: 15 });
}
}
ReactDOM.render(<App />, document.getElementById('default'));import { TextBoxComponent } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import * as ReactDOM from "react-dom";
function App(){
let textBoxObj: any;
return (
<div className="multiline">
<label className="label">Add maxlength attribute through inline</label>
<TextBoxComponent multiline={true} maxLength={'15'} placeholder='Enter your address' floatLabelType='Auto'/>
<label className="label">Add maxlength attribute through addAttributes method</label>
<TextBoxComponent multiline={true} ref = {scope => {textBoxObj = scope }} placeholder='Enter your address' floatLabelType='Auto'/>
<button className='e-control e-btn' id='targetButton1' role='button' onClick={handleClick = handleClick.bind(this)} >Add max length</button>
</div>
);
function handleClick(): void {
textBoxObj.addAttributes({maxlength: 15});
}
}
ReactDOM.render(<App />, document.getElementById('default'));Count characters
You can show the number of characters entered inside the textarea by calculating the character count in the input event of multiline TextBox. The character count is updated while entering or deleting any character inside the textarea. The character count shows how many characters can be entered or left to be entered.
[Class-component]
import { TextBoxComponent } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import * as ReactDOM from "react-dom";
export default class App extends React.Component {
textBoxObj;
render() {
return (<div className="multiline">
<TextBoxComponent multiline={true} input={this.onInput = this.onInput.bind(this)} placeholder='Enter your address' floatLabelType='Auto' maxLength='25' ref={scope => { this.textBoxObj = scope; }}/>
<span id='numbercount'/>
</div>);
}
onInput() {
let word;
let addressCount;
word = this.textBoxObj.respectiveElement.value;
addressCount = word.length;
document.getElementById('numbercount').textContent = addressCount + "/25";
}
}
ReactDOM.render(<App />, document.getElementById('default'));import { TextBoxComponent } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import * as ReactDOM from "react-dom";
export default class App extends React.Component<{}, {}> {
public textBoxObj: any;
public render() {
return (
<div className="multiline">
<TextBoxComponent multiline={true} input={this.onInput = this.onInput.bind(this)} placeholder='Enter your address' floatLabelType='Auto' maxLength='25' ref = {scope => {this.textBoxObj = scope }}/>
<span id='numbercount'/>
</div>
);
}
private onInput(): void {
let word: string;
let addressCount: number;
word = this.textBoxObj.respectiveElement.value;
addressCount = word.length;
(document.getElementById('numbercount') as HTMLElement).textContent = addressCount+"/25";
}
}
ReactDOM.render(<App />, document.getElementById('default'));[Functional-component]
import { TextBoxComponent } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import * as ReactDOM from "react-dom";
function App() {
let textBoxObj;
return (<div className="multiline">
<TextBoxComponent multiline={true} input={onInput = onInput.bind(this)} placeholder='Enter your address' floatLabelType='Auto' maxLength='25' ref={scope => { textBoxObj = scope; }}/>
<span id='numbercount'/>
</div>);
function onInput() {
let word;
let addressCount;
word = textBoxObj.respectiveElement.value;
addressCount = word.length;
document.getElementById('numbercount').textContent = addressCount + "/25";
}
}
ReactDOM.render(<App />, document.getElementById('default'));import { TextBoxComponent } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import * as ReactDOM from "react-dom";
function App() {
let textBoxObj: any;
return (
<div className="multiline">
<TextBoxComponent multiline={true} input={onInput = onInput.bind(this)} placeholder='Enter your address' floatLabelType='Auto' maxLength='25' ref = {scope => {textBoxObj = scope }}/>
<span id='numbercount'/>
</div>
);
function onInput(): void {
let word: string;
let addressCount: number;
word = textBoxObj.respectiveElement.value;
addressCount = word.length;
(document.getElementById('numbercount') as HTMLElement).textContent = addressCount+"/25";
}
}
ReactDOM.render(<App />, document.getElementById('default'));