🚀 We're hiring a Designer, Full-stack Engineer, React Support Engineer, and more!

Textarea Autosize

A textarea component for React which grows with content.

📦 2.1 kB gzipped

The TextareaAutosize component automatically adjust the textarea height on keyboard and window resize events.

Empty

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

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

Minimum height

<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 }}
/>

Maximum height

<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 }}
/>

Unstyled

📦 784 B gzipped

As the component does not have any styles, it also comes with the Base package.

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

API

<TextareaAutosize />