Textarea Autosize

The Textarea Autosize component 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. Its height automatically adjusts as a response to keyboard inputs and window resizing events.

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

Basics

Import

import TextareaAutosize from '@mui/material/TextareaAutosize';

Minimum height

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

<TextareaAutosize
 aria-label="minimum height"
 minRows={3}
 placeholder="Minimum 3 rows"
 style={{ width: 200 }}
/>

Press to start editing

Maximum height

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

<TextareaAutosize
 maxRows={4}
 aria-label="maximum height"
 placeholder="Maximum 4 rows"
 defaultValue="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
 ut labore et dolore magna aliqua."
 style={{ width: 200 }}
/>

Press to start editing

API

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.

<TextareaAutosize />

URL: https://mui.com/material-ui/react-textarea-autosize/