輸入框

Input 元件提供使用者一個欄位來輸入和編輯文字。

Input API

匯入

import { Input } from '@mui/base/Input';
// or
import { Input } from '@mui/base';

請閱讀這份關於最小化套件大小的指南，以了解差異。reading this guide on minimizing bundle size。

屬性

原生元件的屬性也可用。

名稱	類型	預設值	描述
autoComplete	字串	-	此屬性幫助使用者更快地填寫表單，尤其是在行動裝置上。名稱可能會讓人困惑，因為它更像是自動填寫。您可以參考規範了解更多資訊。following the specification。
autoFocus	布林值	-	如果為 `true`，則 `input` 元素會在首次掛載時取得焦點。
className	字串	-	套用至根元素的類別名稱。
defaultValue	任何	-	預設值。當元件不受控制時使用。
disabled	布林值	-	如果為 `true`，則元件會停用。此屬性預設為從父層 FormControl 元件繼承的值 (`false`)。
endAdornment	節點	-	此輸入框的尾隨裝飾。
error	布林值	-	如果為 `true`，`input` 將透過在輸入框上設定 `aria-invalid` 屬性，並在根元素上設定 `baseui--error` 類別來指示錯誤。此屬性預設為從父層 FormControl 元件繼承的值 (`false`)。
id	字串	-	`input` 元素的 id。
maxRows	數字	-	當 multiline 選項設定為 true 時，要顯示的最大列數。
minRows	數字	-	當 multiline 選項設定為 true 時，要顯示的最小列數。
multiline	布林值	false	如果為 `true`，則會渲染 `textarea` 元素。
name	字串	-	`input` 元素的 name 屬性。
placeholder	字串	-	使用者輸入值之前，顯示在 `input` 中的簡短提示。
readOnly	布林值	-	它防止使用者變更欄位的值（但不會阻止與欄位互動）。
required	布林值	-	如果為 `true`，則 `input` 元素為必填。此屬性預設為從父層 FormControl 元件繼承的值 (`false`)。
rows	數字	-	當 multiline 選項設定為 true 時，要顯示的列數。
slotProps	{ input?: func \| object, root?: func \| object }	{}	用於 Input 內每個 slot 的屬性。
slots	{ input?: elementType, root?: elementType, textarea?: elementType }	{}	用於 InputBase 內每個 slot 的元件。可以是字串（用於 HTML 元素）或元件。請參閱下方的 Slots API 以了解更多詳細資訊。Slots API below for more details.
startAdornment	節點	-	此輸入框的前導裝飾。
type	'button' \| 'checkbox' \| 'color' \| 'date' \| 'datetime-local' \| 'email' \| 'file' \| 'hidden' \| 'image' \| 'month' \| 'number' \| 'password' \| 'radio' \| 'range' \| 'reset' \| 'search' \| 'submit' \| 'tel' \| 'text' \| 'time' \| 'url' \| 'week'	'text'	`input` 元素的類型。它應該是有效的 HTML5 輸入類型。a valid HTML5 input type。
value	任何	-	`input` 元素的值，受控元件為必填。

ref 會轉發到根元素。

Slots

若要了解如何自訂 slot，請查看 Overriding component structure 指南。Overriding component structure guide.

Slot 名稱	類別名稱	預設元件	描述
root	.base-Input-root	`'div'`	渲染根的元件。
input	.base-Input-input	`'input'`	渲染 input 的元件。
textarea		`'textarea'`	渲染 textarea 的元件。

CSS 類別

這些類別名稱對於使用 CSS 設定樣式很有用。當觸發特定狀態時，它們會套用至元件的 slot。

類別名稱	描述
.base--disabled	如果 `disabled={true}`，則套用至根元素的狀態類別。
.base--error	如果 `error={true}`，則套用至根元素的狀態類別。
.base--focused	如果元件取得焦點，則套用至根元素的狀態類別。
.base-Input-adornedEnd	如果提供 `endAdornment`，則套用至根元素的類別名稱。
.base-Input-adornedStart	如果提供 `startAdornment`，則套用至根元素的類別名稱。
.base-Input-formControl	如果元件是 FormControl 的後代，則套用至根元素的類別名稱。
.base-Input-inputMultiline	如果 `multiline={true}`，則套用至 input 元素的類別名稱。
.base-Input-inputTypeSearch	如果 `type="search"`，則套用至 input 元素的類別名稱。
.base-Input-multiline	如果 `multiline={true}`，則套用至根元素的類別名稱。