Textarea

文字區域組件是一個多行輸入框，允許您輸入大量文字。

安裝

上述命令僅適用於個別安裝。如果 @nextui-org/react 已全域安裝，您可以跳過此步驟。

匯入

用法

已停用

唯讀

必填

如果您將 isRequired 屬性傳遞給輸入框，它將在標籤的末尾顯示一個 danger 星號，並且該文字區域將成為必填。

清除按鈕

如果您將 isClearable 屬性傳遞給文字區域，它將在文字區域的末尾顯示一個清除按鈕，當文字區域有值時，該按鈕將可見。

自動調整大小

文字區域會根據內容自動擴展，但您也可以使用 minRows 和 maxRows 屬性來設定其最小和最大高度。它是基於 react-textarea-autosize 實作。

無自動調整大小

如果您想禁用自動調整大小的功能，可以使用 disableAutosize 屬性。

變體

帶錯誤訊息

您可以結合 isInvalid 和 errorMessage 屬性來顯示無效的文字區域。

描述

受控的

您可以使用 value 和 onValueChange 屬性來控制輸入值。

注意：NextUI 的 Textarea 也支援原生事件，例如 onChange，這對於表單函式庫（如 Formik 和 React Hook Form）很有用。

插槽

• base：輸入框的包裝器，它處理對齊、放置和整體外觀。
• label：文字區域的標籤，它顯示在文字區域的上方、內部或左側。
• inputWrapper：包裝 label（當它在內部時）和 innerWrapper。
• input：文字區域的輸入元素。
• description：文字區域的描述。
• errorMessage：文字區域的錯誤訊息。
• headerWrapper：包裝 label 和 clearButton。

資料屬性

Textarea 在 base 元素上具有以下屬性

• data-invalid：當文字區域無效時。基於 isInvalid prop。
• data-required：當文字區域為必填時。基於 isRequired prop。
• data-readonly：當文字區域為唯讀時。基於 isReadOnly prop。
• data-hover：當滑鼠懸停在文字區域上時。基於 useHover
• data-focus：當文字區域被聚焦時。基於 useFocusRing。
• data-focus-visible：當使用鍵盤聚焦文字區域時。基於 useFocusRing。
• data-disabled：當文字區域被禁用時。基於 isDisabled prop。

無障礙功能

• 使用原生的 <input> 元素建構。
• 支援視覺和 ARIA 標籤。
• 支援變更、剪貼簿、組合、選擇和輸入事件。
• 透過 ARIA 向輔助技術公開必填和無效狀態。
• 支援透過 ARIA 連結到輸入的描述和錯誤訊息輔助文字。

API

文字區域屬性

輸入事件