Textarea Autosize

The Textarea Autosize component gives you a textarea HTML element that automatically adjusts its height to match the length of the content within.

Introduction

Textarea Autosize is a utility component that replaces the native <textarea> HTML.

The height of the Textarea Autosize component automatically adjusts as a response to keyboard inputs and window resizing events.

Component

Usage

After installation, you can start building with this component using the following basic elements:

<span class="token keyword">import</span> TextareaAutosize <span class="token keyword">from</span> <span class="token string">'@mui/base/TextareaAutosize'</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token function">MyApp</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">TextareaAutosize</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

Basics

Textarea Autosize behaves similarly to the native HTML<textarea>.

By default, an empty Textarea Autosize component renders as a single row, as shown in the following demo:

Customization

Minimum height

Use the minRows prop to define the minimum height of the component:

Maximum height

Use the maxRows prop to define the maximum height of the component: