TextArea Component

TextArea component that provides a multi-line text input field with enhanced functionality. Supports both controlled and uncontrolled modes based on presence of value or defaultValue prop.

Usage

To import and use the TextArea component in your application, use the following code snippet:

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

<TextArea defaultValue="Initial text" placeholder="Enter text" rows={5} cols={40} />

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

<TextArea defaultValue="Initial text" placeholder="Enter text" rows={5} cols={40} />

Demos

Explore the demos of the React TextArea component. Refer to this page.

Props

The following table outlines the props for the TextArea component:

Name	Type	Default	Description
clearButton	node	false	Specifies whether to show a clear button within the input field. When enabled, a clear button (×) appears when the field has a value, allowing users to quickly clear the input with a single click.
cols	number	-	Specifies the number of columns for the textarea
defaultValue	string	-	Specifies the default value of the component. Used for uncontrolled mode.
labelMode	LabelMode	'Never'	Specifies the floating label type for the component.
placeholder	string	-	Specifies the placeholder text for the component.
resizeMode	ResizeMode	ResizeMode.Both	Specifies the resize mode for the textarea
rows	number	2	Specifies the number of rows for the textarea
size	Size	Size.Medium	Specifies the size of the component. Options include 'Small', 'Medium' and 'Large'.
value	string	-	Specifies the value of the component. When provided, the component will be controlled.
variant	Variant	Variant.Standard	Specifies the visual style variant of the component.

Events

The following table outlines the events for the TextArea component:

Name	Type	Description
onChange	(event: TextAreaChangeEvent) => void	Specifies the Callback that fired when the input value is changed.