Textarea autosize

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

TextareaAutosize is a 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.

Basic usage

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

Simple textarea

By default, an empty TextareaAutosize component renders as a single row:

<TextareaAutosize
  aria-label="empty textarea"
  placeholder="Empty"
  style={{ width: 200 }}
/><TextareaAutosize
  aria-label="empty textarea"
  placeholder="Empty"
  style={{ width: 200 }}
/>

Press Enter to start editing

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

Press Enter 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 }}
/><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 Enter to start editing

Bundle size

📦 1.5 kB gzipped.

API

<TextareaAutosize />