Textarea Autosize

Textarea Autosize 组件为您提供一个 textarea HTML 元素，该元素会自动调整其高度以匹配其中的内容长度。

简介

Textarea Autosize 是一个实用组件，用于替换原生 <textarea> HTML。

Textarea Autosize 组件的高度会根据键盘输入和窗口大小调整事件自动调整。

组件

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

Textarea Autosize 的行为类似于原生 HTML<textarea>。默认情况下，一个空的 Textarea Autosize 组件渲染为单行，如下面的演示所示

自定义

最小高度

使用 minRows 属性来定义组件的最小高度

<Textarea aria-label="minimum height" minRows={3} placeholder="Minimum 3 rows" />

<Textarea aria-label="minimum height" minRows={3} placeholder="Minimum 3 rows" />

按 Enter 开始编辑

最大高度

使用 maxRows 属性来定义组件的最大高度

<Textarea
  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."
/>

<Textarea
  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."
/>

按 Enter 开始编辑