Textarea autosize

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

Introduction

TextareaAutosize is a utility component that replaces the native <textarea> HTML element.

The height of the TextareaAutosize 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:

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

export default function MyApp() {
  return <TextareaAutosize />;
}

Basics

TextareaAutosize behaves similarly to the native HTML<textarea>.

By default, an empty TextareaAutosize 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:

API

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

• <TextareaAutosize />