Syncfusion AI Assistant

How can I help you?

Rows and Columns in React TextArea Component

21 Feb 20263 minutes to read

The Essential® rows and cols attributes control TextArea dimensions. The rows attribute sets the initial visible number of lines (vertical size), while the cols attribute specifies the visible width in characters per line (horizontal size).

Customize TextArea dimensions using the rows and cols properties for precise control that fits your application layout.

// Import the TextArea.
import { TextAreaComponent } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import * as ReactDom from 'react-dom';

// To render TextArea.
function App() {
    return (
        <div className='wrap'>
            <div>
                <TextAreaComponent id="default1" placeholder="Enter your comments" floatLabelType="Auto" rows="3" cols="35"></TextAreaComponent>
            </div>
            <div>
                <TextAreaComponent id="default2" placeholder="Enter your comments" floatLabelType="Auto" rows="5" cols="40"></TextAreaComponent>
            </div>        
        </div>
    );
}
export default App;
ReactDom.render(<App />, document.getElementById('input-container'));
// Import the TextArea.
import { TextAreaComponent } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import * as ReactDom from 'react-dom';

// To render TextArea.
function App() {
  
    return (
        <div className='wrap'>
            <div>
                <TextAreaComponent id="default1" placeholder="Enter your comments" floatLabelType="Auto" rows="3" cols="35"></TextAreaComponent>
            </div>
            <div>
                <TextAreaComponent id="default2" placeholder="Enter your comments" floatLabelType="Auto" rows="5" cols="40"></TextAreaComponent>
            </div>
        </div>
    );
}
export default App;
ReactDom.render(<App />,document.getElementById('input-container'));