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:

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

export default function EmptyTextarea() {
  return (
    <TextareaAutosize
      aria-label="empty textarea"
      placeholder="Empty"
      style={{ width: 200 }}
    />
  );
}

Basics

Import

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

Minimum height

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

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

export default function MinHeightTextarea() {
  return (
    <TextareaAutosize
      aria-label="minimum height"
      minRows={3}
      placeholder="Minimum 3 rows"
      style={{ width: 200 }}
    />
  );
}

Maximum height

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

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

export default function MaxHeightTextarea() {
  return (
    <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 }}
    />
  );
}

API

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

<TextareaAutosize />