輸入框
Input 元件為使用者提供一個欄位來輸入和編輯文字。
簡介
輸入框是一種 UI 元素，可接受使用者輸入的文字資料。Input 元件取代了原生的 HTML <input> 標籤，並提供更豐富的自訂和無障礙功能。它也可以根據需要轉換為 <textarea>。
元件
import { Input } from '@mui/base/Input';
Input 的行為與原生 HTML <input> 類似，只是它被巢狀在一個根 <div> 內——詳情請參閱結構。
以下示範展示如何建立和設定輸入框元件的樣式，包括 placeholder 文字
結構
Input 元件由一個根 <div> 插槽組成，其中包含一個內部的 <input> 插槽
<div class="base-Input-root">
<input class="base-Input-input" />
</div>
自訂結構
使用 slots 屬性來覆寫根插槽或任何其他內部插槽
<Input slots={{ root: 'aside', input: CustomInput }} />
使用 slotProps 屬性將自訂屬性傳遞到內部插槽。以下程式碼片段將名為 my-input 的 CSS 類別應用於 input 插槽
<Input slotProps={{ input: { className: 'my-input' } }} />
TypeScript 用法
在 TypeScript 中，您可以將 slots.root 中使用的自訂元件類型指定為非樣式元件的泛型參數。這樣一來，您就可以安全地直接在元件上提供自訂根元件的屬性
<Input<typeof CustomComponent> slots={{ root: CustomComponent }} customProp />
這同樣適用於特定於自訂原始元素的屬性
<Input<'textarea'> slots={{ root: 'textarea' }} rows={2} />
Hook
import { useInput } from '@mui/base/useInput';
useInput Hook 可讓您將 Input 的功能應用於完全自訂的元件。它會傳回要放置在自訂元件上的屬性，以及表示元件內部狀態的欄位。
以下示範展示如何使用 useInput Hook 建立一個接收所有必要屬性的自訂輸入框元件
自訂
裝飾
您可以使用 startAdornment 和 endAdornment 屬性，將前綴、後綴或動作新增至輸入框。裝飾的常見用例包括
- 當輸入框接收特定的度量單位時（例如重量或貨幣）
- 當圖示按鈕切換隱藏/顯示密碼時
以下示範展示了這兩種用例的範例
多行
multiline 屬性將 <input> 欄位轉換為 <textarea> 元素，如下所示
如果您希望 <textarea> 隨著內容增長，您可以在輸入框中使用文字區域自動調整大小元件。
使用文字區域自動調整大小時，除非您設定 rows 屬性，否則 <textarea> 元素的高度會動態符合其內容。若要設定最小和最大尺寸，請新增 minRows 和 maxRows 屬性。
以下示範展示如何將文字區域自動調整大小元件插入輸入框，使其高度隨著內容長度增長