InputAPI

React Input 元件的 API 參考文件。瞭解此匯出模組的 props、CSS 和其他 API。

示範

如需此 React 元件的使用範例和詳細資訊，請造訪元件示範頁面

文字欄位

匯入

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

閱讀關於最小化套件大小的指南，以瞭解差異。

Props

InputBase 元件的 Props 也可用。

名稱	類型	預設值	描述
autoComplete	string	-	此 prop 協助使用者更快填寫表單，尤其是在行動裝置上。名稱可能會造成混淆，因為它更像是自動填寫。您可以依照規格瞭解更多資訊。
autoFocus	bool	-	若為 `true`，則 `input` 元素會在首次掛載時取得焦點。
classes	object	-	覆寫或擴充套用至元件的樣式。詳情請參閱下方的CSS 類別 API。
color	'primary' \| 'secondary' \| string	-	元件的色彩。它同時支援預設和自訂主題色彩，可以按照調色盤自訂指南中所示的方式新增。此 prop 預設為從父 FormControl 元件繼承的值 (`'primary'`)。
components	{ Input?: elementType, Root?: elementType }	{}	用於每個內部 slot 的元件。已棄用－請改用 `slots` prop。此 prop 將在 v7 中移除。請參閱從已棄用的 API 遷移以瞭解更多詳細資訊。
componentsProps	{ input?: object, root?: object }	{}	slot 元件的額外 props。您可以覆寫現有的 props 或新增 props。已棄用－請改用 `slotProps` prop。此 prop 將在 v7 中移除。請參閱從已棄用的 API 遷移以瞭解更多詳細資訊。
defaultValue	any	-	預設值。當元件不受控制時使用。
disabled	bool	-	若為 `true`，則停用元件。此 prop 預設為從父 FormControl 元件繼承的值 (`false`)。
disableUnderline	bool	false	若為 `true`，則 `input` 將不會有底線。
endAdornment	node	-	此元件的結尾 `InputAdornment`。
error	bool	-	若為 `true`，則 `input` 將指示錯誤。此 prop 預設為從父 FormControl 元件繼承的值 (`false`)。
fullWidth	bool	false	若為 `true`，則 `input` 將佔用其容器的完整寬度。
id	string	-	`input` 元素的 id。
inputComponent	elementType	'input'	用於 `input` 元素的元件。可以是字串 (用於 HTML 元素) 或元件。
inputProps	object	{}	屬性套用至 `input` 元素。
inputRef	ref	-	將 ref 傳遞至 `input` 元素。
margin	'dense' \| 'none'	-	若為 `dense`，將調整垂直間距。這通常透過 FormControl 的 context 取得。此 prop 預設為從父 FormControl 元件繼承的值 (`'none'`)。
maxRows	number \| string	-	當 multiline 選項設定為 true 時，要顯示的最大列數。
minRows	number \| string	-	當 multiline 選項設定為 true 時，要顯示的最小列數。
multiline	bool	false	若為 `true`，則會呈現 TextareaAutosize 元素。
name	string	-	`input` 元素的 Name 屬性。
onChange	func	-	當值變更時觸發的回呼。簽名：`function(event: React.ChangeEvent) => void` `event` 回呼的事件來源。您可以透過存取 `event.target.value` (字串) 來取出新值。
placeholder	string	-	使用者輸入值之前，`input` 中顯示的簡短提示。
readOnly	bool	-	防止使用者變更欄位的值 (而非與欄位互動)。
required	bool	-	若為 `true`，則 `input` 元素為必要。此 prop 預設為從父 FormControl 元件繼承的值 (`false`)。
rows	number \| string	-	當 multiline 選項設定為 true 時，要顯示的列數。
slotProps	{ input?: object, root?: object }	{}	slot 元件的額外 props。您可以覆寫現有的 props 或新增 props。此 prop 是 `componentsProps` prop 的別名，未來將會棄用。
slots	{ input?: elementType, root?: elementType }	{}	用於每個內部 slot 的元件。此 prop 是 `components` prop 的別名，未來將會棄用。
startAdornment	node	-	此元件的開頭 `InputAdornment`。
sx	Array<func \| object \| bool> \| func \| object	-	系統 prop，允許定義系統覆寫以及額外的 CSS 樣式。詳情請參閱 `sx` 頁面。
type	string	'text'	`input` 元素的類型。應為有效的 HTML5 input 類型。
value	any	-	`input` 元素的值，受控元件的必要屬性。

ref 會轉發到根元素。

繼承

雖然上方未明確記錄，但 InputBase 元件的 props 也適用於 Input。您可以利用此優勢鎖定巢狀元件。

主題預設 props

您可以使用 MuiInput 來變更此元件的預設 props 透過主題。

CSS 類別

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

類別名稱	規則名稱	描述
.Mui-disabled		若 `disabled={true}`，則套用至根元素的樣式。
.Mui-error		若 `error={true}`，則套用至根元素的狀態類別。
.Mui-focused		若元件取得焦點，則套用至根元素的樣式。
.MuiInput-colorSecondary	colorSecondary	若色彩為 secondary，則套用至根元素的樣式。
.MuiInput-formControl	formControl	若元件為 `FormControl` 的後代，則套用至根元素的樣式。
.MuiInput-fullWidth	fullWidth	若 `fullWidth={true}`，則套用至根元素的樣式。
.MuiInput-input	input	套用至 input 元素的樣式。
.MuiInput-inputAdornedEnd	inputAdornedEnd	若提供 `endAdornment`，則套用至 input 元素的樣式。
.MuiInput-inputAdornedStart	inputAdornedStart	若提供 `startAdornment`，則套用至 input 元素的樣式。
.MuiInput-inputMultiline	inputMultiline	若 `multiline={true}`，則套用至 input 元素的樣式。
.MuiInput-inputSizeSmall	inputSizeSmall	若 `size="small"`，則套用至 input 元素的樣式。
.MuiInput-inputTypeSearch	inputTypeSearch	若 `type="search"`，則套用至 input 元素的樣式。
.MuiInput-multiline	multiline	若 `multiline={true}`，則套用至根元素的樣式。
.MuiInput-root	root	套用至根元素的樣式。
.MuiInput-sizeSmall	sizeSmall	若 `size="small"`，則套用至 input 元素的樣式。
.MuiInput-underline	underline	除非 `disableUnderline={true}`，否則套用至根元素的樣式。

您可以使用下列其中一種自訂選項來覆寫元件的樣式

使用全域類別名稱。
在自訂主題中使用規則名稱作為元件的 styleOverrides 屬性的一部分。

原始碼

如果您在此頁面中找不到資訊，請考慮查看元件的實作以瞭解更多詳細資訊。