• What is KendoReact
  • Getting Started
  • Server Components
  • Components
    • Animation
    • Barcodes
    • Buttons
    • Chartsupdated
    • Common Utilities
    • Conversational UIupdated
    • Data Gridupdated
    • Data Query
    • Data Tools
    • Date Inputs
    • Date Math
    • Dialogs
    • Drawing
    • Dropdownsupdated
    • Editor
    • Excel Export
    • File Saver
    • Formupdated
    • Ganttupdated
    • Gauges
    • Indicators
    • Inputsupdated
    • Labels
    • Layoutupdated
    • ListBoxupdated
    • ListView
    • Map
    • Notification
    • OrgChartnew
    • PDF Processing
    • PDFViewer
    • PivotGrid
    • Popup
    • Progress Bars
    • Ripple
    • Scheduler
    • ScrollView
    • Sortable
    • Spreadsheetupdated
    • TaskBoard
    • Tooltips
    • TreeList
    • TreeViewupdated
    • Upload
  • Sample Applications
  • Styling & Themes
  • Common Features
  • Project Setup
  • Knowledge Base
  • Changelog
  • Updates
  • Troubleshooting
Components / Inputs / API / TextAreaProps / 

TextAreaProps

Represents the props of the KendoReact TextArea component.

NameTypeDefaultDescription

ariaDescribedBy?

string

Identifies the element(s) which will describe the component, similar to HTML aria-describedby attribute. For example these elements could contain error or hint message.

ariaLabelledBy?

string

Identifies the element(s) which will label the component.

autoSize?

boolean

Specifies if the textarea element will resize its height automatically (see example). Defaults to false.

Setting the value of the prop to true will make the TextArea component to ignore the resize behavior of the resizable prop.

className?

string

Specifies a list of CSS classes that will be added to the TextArea.

defaultValue?

string | number | string[]

The default value of the TextArea (see example).

dir?

string

Represents the dir HTML attribute.

disabled?

boolean

Specifies if the TextArea is disabled (see example).

fillMode?

"null" | "flat" | "solid" | "outline"

solid

Configures the fillMode of the TextArea.

The available options are:

  • solid
  • outline
  • flat
  • null—Does not set a fillMode className.

id?

string

Sets the id of the TextArea.

name?

string

Specifies the name property of the textarea DOM element.

This property is part of the FormComponentProps interface.

onBlur?

(event: TextAreaBlurEvent) => void

The event handler that will be fired when TextArea is blurred.

onChange?

(event: TextAreaChangeEvent) => void

The event handler that will be fired when the changes the selected value.

onFocus?

(event: TextAreaFocusEvent) => void

The event handler that will be fired when TextArea is focused.

placeholder?

string

The hint that is displayed when the TextArea is empty.

prefix?

CustomComponent<any>

Sets a custom prefix to the TextArea component.

readOnly?

boolean

Sets the read-only state of the TextArea.

required?

boolean

Specifies if null is a valid value for the component.

This property is part of the FormComponentProps interface.

resizable?

"none" | "horizontal" | "vertical" | "both"

both

To be able to resize the TextArea, you should not set the autoSize property to true . To be able to resize the component horizontally, add the following inline style to the TextArea:

<TextArea resizable='horizontal' style={{width: 'auto'}}  />


</code>


</td>
<td class="table-cell-comment">


Defines the resize behavior of the TextArea.
The available options are:
- none &mdash; The TextArea cannot be resized.
- vertical &mdash; The TextArea can be resized vertically.
- horizontal &mdash; The TextArea can be resized horizontally.
- both &mdash; The TextArea can be resized both vertically and horizontally.





</td>
</tr>
<tr>
<td class="table-cell-name">


#### rounded?


</td>
<td type class="table-cell-type">


<code>


"null" | "small" | "large" | "medium" | "full"


</code>


</td>
<td class="table-cell-default">


<code>


`medium`


</code>


</td>
<td class="table-cell-comment">


Configures the `roundness` of the TextArea.

The available options are:
- small
- medium
- large
- full
- null&mdash;Does not set a rounded `className`.





</td>
</tr>
<tr>
<td class="table-cell-name">


#### rows?


</td>
<td type class="table-cell-type">


<code>


number


</code>


</td>
<td class="table-cell-default">




</td>
<td class="table-cell-comment">


Specifies an exact height size for the TextArea to take ([see example]({% slug sizing_textarea %})).


</td>
</tr>
<tr>
<td class="table-cell-name">


#### size?


</td>
<td type class="table-cell-type">


<code>


"null" | "small" | "large" | "medium"


</code>


</td>
<td class="table-cell-default">


<code>


`medium`


</code>


</td>
<td class="table-cell-comment">


Configures the `size` of the TextArea.

The available options are:
- small
- medium
- large
- null&mdash;Does not set a size `className`.





</td>
</tr>
<tr>
<td class="table-cell-name">


#### style?


</td>
<td type class="table-cell-type">


<code>


React.CSSProperties


</code>


</td>
<td class="table-cell-default">




</td>
<td class="table-cell-comment">


Sets additional CSS styles to the TextArea.


</td>
</tr>
<tr>
<td class="table-cell-name">


#### suffix?


</td>
<td type class="table-cell-type">


<code>


CustomComponent&lt;any&gt;


</code>


</td>
<td class="table-cell-default">




</td>
<td class="table-cell-comment">


Sets a custom suffix to the TextArea component.


</td>
</tr>
<tr>
<td class="table-cell-name">


#### tabIndex?


</td>
<td type class="table-cell-type">


<code>


number


</code>


</td>
<td class="table-cell-default">




</td>
<td class="table-cell-comment">


Sets the `tabIndex` property of the TextArea.
Defaults to `0`.


</td>
</tr>
<tr>
<td class="table-cell-name">


#### valid?


</td>
<td type class="table-cell-type">


<code>


boolean


</code>


</td>
<td class="table-cell-default">




</td>
<td class="table-cell-comment">


Overrides the validity state of the component.
If `valid` is set, the `required` property will be ignored.

This property is part of the [FormComponentProps]({% slug api_common_formcomponentprops %}) interface.


</td>
</tr>
<tr>
<td class="table-cell-name">


#### validationMessage?


</td>
<td type class="table-cell-type">


<code>


string


</code>


</td>
<td class="table-cell-default">




</td>
<td class="table-cell-comment">


Controls the form error message of the component. If set to an empty string, no error will be thrown.

This property is part of the [FormComponentProps]({% slug api_common_formcomponentprops %}) interface.


</td>
</tr>
<tr>
<td class="table-cell-name">


#### validityStyles?


</td>
<td type class="table-cell-type">


<code>


boolean


</code>


</td>
<td class="table-cell-default">




</td>
<td class="table-cell-comment">


If set to `false`, no visual representation of the invalid state of the component will be applied.

This property is part of the [FormComponentProps]({% slug api_common_formcomponentprops %}) interface.


</td>
</tr>
<tr>
<td class="table-cell-name">


#### value?


</td>
<td type class="table-cell-type">


<code>


string | number | string[]


</code>


</td>
<td class="table-cell-default">




</td>
<td class="table-cell-comment">


Sets the value to be submitted ([see example]({% slug controlled_textarea %})).


</td>
</tr>
</tbody>
</table>

In this article

Not finding the help you need?

Contact Support