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 開始編輯