版本：v8

ion-input

輸入元件是 HTML 輸入元素的包裝器，具有自定義樣式和額外功能。它接受與 HTML 輸入相同的許多屬性，並與行動裝置上的鍵盤整合。

基本用法

類型

輸入元件僅適用於文字類型輸入，例如 "text"、"password"、"email"、"number"、"search"、"tel" 和 "url"。它支援所有標準文字輸入事件，包括 keyup、keydown、keypress 等。預設的 type 是 "text"。

清除選項

輸入框提供兩個選項來清除輸入框，具體取決於您與之互動的方式。第一種方式是新增 clearInput 屬性，當輸入框具有 value 時，將顯示一個清除按鈕。第二種方式是 clearOnEdit 屬性，它會在輸入框失去焦點，然後再次輸入後清除輸入框。type 設定為 "password" 的輸入框預設會啟用 clearOnEdit。

已填寫的輸入框

Material Design 為輸入框提供已填寫的樣式。輸入框上的 fill 屬性可以設定為 "solid" 或 "outline"。

可以透過將輸入框的 mode 設定為 md，在 iOS 上使用已填寫的輸入框。

警告

使用 fill 的輸入框不應在 ion-item 中使用，因為元件之間存在樣式衝突。

輔助和錯誤文字

可以使用 helperText 和 errorText 屬性在輸入框內使用輔助文字和錯誤文字。除非將 ion-invalid 和 ion-touched 類別新增至 ion-input，否則不會顯示錯誤文字。這可確保在使用者有機會輸入資料之前，不會顯示錯誤。

在 Angular 中，這是透過表單驗證自動完成的。在 JavaScript、React 和 Vue 中，需要根據您自己的驗證手動新增類別。

輸入計數器

輸入計數器是在輸入框下方顯示的文字，用於通知使用者已輸入的字元數（相對於輸入框將接受的總字元數）。新增計數器時，預設行為是將顯示的值格式化為 inputLength / maxLength。可以透過將格式化函式傳遞給 counterFormatter 屬性來自訂此行為。

ion-item 上的 counter 和 counterFormatter 屬性已在 Ionic 7 中遭到棄用，應改為直接在 ion-input 上使用。

具有計數器的輸入框會在輸入框和計數器之間新增邊框，因此不應將它們放置在 ion-item 內，後者會在項目下方新增額外邊框。可以新增 ion-padding-start 類別，以將計數器輸入框與項目內的輸入框對齊。

篩選使用者輸入

開發人員可以使用 ionInput 事件來更新輸入值，以回應使用者輸入（例如 keypress）。這對於篩選掉無效或不需要的字元非常有用。

在狀態變數中儲存值時，我們建議同時更新狀態變數和 ion-input 元件值。這可確保狀態變數和 ion-input 元件值保持同步。

輸入遮罩

輸入遮罩是限制輸入以支援有效輸入值的表達式。Ionic 建議使用 Maskito 進行輸入遮罩。Maskito 是一個輕量級、無依賴項的程式庫，用於遮罩輸入欄位。它支援各種遮罩，包括電話號碼、信用卡、日期等。

若要開始使用 Maskito，請安裝程式庫

npm install @maskito/core @maskito/{angular,react,vue}

注意

請將 Maskito 的錯誤報告提交至 Maskito Github 儲存庫。如需技術支援，請使用 Ionic 論壇或 Ionic Discord。

起始和結束插槽 (實驗性)

start 和 end 插槽可用於在輸入框的兩側放置圖示、按鈕或前綴/後綴文字。

請注意，此功能被視為實驗性功能，因為它依賴於模擬版本的 Web Component 插槽。因此，模擬的行為可能與原生插槽行為不完全相符。

注意

在大多數情況下，放置在這些插槽中的 Icon 元件應該具有 aria-hidden="true"。請參閱 Icon 無障礙文件以了解更多資訊。

如果插槽內容需要互動，則應將其包裝在互動元素中，例如 Button。這可確保可以使用 tab 鍵選取內容。

主題化

色彩

設定 color 屬性會變更每個輸入框的色彩調色盤。在 ios 模式下，此屬性會變更插入符號色彩。在 md 模式下，此屬性會變更插入符號色彩和醒目提示/底線色彩。

注意

color 屬性不會變更輸入框的文字色彩。為此，請使用 --color CSS 屬性。

CSS 自訂屬性

輸入框使用範圍封裝，這表示它會透過在執行階段將額外的類別附加至每個樣式來自動設定其 CSS 的範圍。在 CSS 中覆寫範圍選取器需要具有較高的特殊性選取器。針對 ion-input 進行自訂將無法運作；因此，我們建議新增類別並以該方式進行自訂。

從舊版輸入語法遷移

Ionic 7.0 中引入了更簡化的輸入語法。這個新的語法減少了設定輸入框所需的樣板程式碼、解決了無障礙問題並改善了開發人員體驗。

開發人員可以一次執行一個輸入框的遷移。雖然開發人員可以繼續使用舊版語法，但我們建議盡快遷移。

使用新式語法

使用新式語法包含三個步驟

移除 ion-label，並改為在 ion-input 上使用 label 屬性。可以使用 ion-input 上的 labelPlacement 屬性設定標籤的位置。
將輸入框專屬屬性從 ion-item 移至 ion-input。這包括 counter、counterFormatter、fill 和 shape 屬性。
移除 ion-item 上 helper 和 error 插槽的使用，並改為在 ion-input 上使用 helperText 和 errorText 屬性。

JavaScript
Angular
React
Vue

<!-- Label and Label Position -->

<!-- Before -->
<ion-item>
  <ion-label position="floating">Email:</ion-label>
  <ion-input></ion-input>
</ion-item>

<!-- After -->
<ion-item>
  <ion-input label="Email:" label-placement="floating"></ion-input>
</ion-item>


<!-- Fill -->

<!-- Before -->
<ion-item fill="outline" shape="round">
  <ion-label position="floating">Email:</ion-label>
  <ion-input></ion-input>
</ion-item>

<!-- After -->

<!-- Inputs using `fill` should not be placed in ion-item -->
<ion-input fill="outline" shape="round" label="Email:" label-placement="floating"></ion-input>

<!-- Input-specific features on ion-item -->

<!-- Before -->
<ion-item counter="true">
  <ion-label position="floating">Email:</ion-label>
  <ion-input maxlength="100"></ion-input>
  <div slot="helper">Enter an email</div>
  <div slot="error">Please enter a valid email</div>
</ion-item>

<!-- After -->

<!--
  Metadata such as counters and helper text should not
  be used when an input is in an item/list. If you need to
  provide more context on a input, consider using an ion-note
  underneath the ion-list.
-->

<ion-input
  label="Email:"
  counter="true"
  maxlength="100"
  helper-text="Enter an email"
  error-text="Please enter a valid email"
></ion-input>

<!-- Label and Label Position -->

<!-- Before -->
<ion-item>
  <ion-label position="floating">Email:</ion-label>
  <ion-input></ion-input>
</ion-item>

<!-- After -->
<ion-item>
  <ion-input label="Email:" labelPlacement="floating"></ion-input>
</ion-item>


<!-- Fill -->

<!-- Before -->
<ion-item fill="outline" shape="round">
  <ion-label position="floating">Email:</ion-label>
  <ion-input></ion-input>
</ion-item>

<!-- After -->

<!-- Inputs using `fill` should not be placed in ion-item -->
<ion-input fill="outline" shape="round" label="Email:" labelPlacement="floating"></ion-input>

<!-- Input-specific features on ion-item -->

<!-- Before -->
<ion-item [counter]="true">
  <ion-label position="floating">Email:</ion-label>
  <ion-input maxlength="100"></ion-input>
  <div slot="helper">Enter an email</div>
  <div slot="error">Please enter a valid email</div>
</ion-item>

<!-- After -->

<!--
  Metadata such as counters and helper text should not
  be used when an input is in an item/list. If you need to
  provide more context on a input, consider using an ion-note
  underneath the ion-list.
-->

<ion-input
  label="Email:"
  [counter]="true"
  maxlength="100"
  helperText="Enter an email"
  errorText="Please enter a valid email"
></ion-input>

{/* Label and Label Position */}

{/* Before */}
<IonItem>
  <IonLabel position="floating">Email:</IonLabel>
  <IonInput></IonInput>
</IonItem>

{/* After */}
<IonItem>
  <IonInput label="Email:" labelPlacement="floating"></IonInput>
</IonItem>


{/* Fill */}

{/* Before */}
<IonItem fill="outline" shape="round">
  <IonLabel position="floating">Email:</IonLabel>
  <IonInput></IonInput>
</IonItem>

{/* After */}

{/* Inputs using `fill` should not be placed in IonItem */}
<IonInput fill="outline" shape="round" label="Email:" labelPlacement="floating"></IonInput>

{/* Input-specific features on IonItem */}

{/* Before */}
<IonItem counter={true}>
  <IonLabel position="floating">Email:</IonLabel>
  <IonInput maxlength="100"></IonInput>
  <div slot="helper">Enter an email</div>
  <div slot="error">Please enter a valid email</div>
</IonItem>

{/* After */}

{/*
  Metadata such as counters and helper text should not
  be used when an input is in an item/list. If you need to
  provide more context on a input, consider using an IonNote
  underneath the IonList.
*/}

<IonInput
  label="Email:"
  counter={true}
  maxlength="100"
  helperText="Enter an email"
  errorText="Please enter a valid email"
></IonInput>

<!-- Label and Label Position -->

<!-- Before -->
<ion-item>
  <ion-label position="floating">Email:</ion-label>
  <ion-input></ion-input>
</ion-item>

<!-- After -->
<ion-item>
  <ion-input label="Email:" label-placement="floating"></ion-input>
</ion-item>


<!-- Fill -->

<!-- Before -->
<ion-item fill="outline" shape="round">
  <ion-label position="floating">Email:</ion-label>
  <ion-input></ion-input>
</ion-item>

<!-- After -->

<!-- Inputs using `fill` should not be placed in ion-item -->
<ion-input fill="outline" shape="round" label="Email:" label-placement="floating"></ion-input>

<!-- Input-specific features on ion-item -->

<!-- Before -->
<ion-item :counter="true">
  <ion-label position="floating">Email:</ion-label>
  <ion-input maxlength="100"></ion-input>
  <div slot="helper">Enter an email</div>
  <div slot="error">Please enter a valid email</div>
</ion-item>

<!-- After -->

<!--
  Metadata such as counters and helper text should not
  be used when an input is in an item/list. If you need to
  provide more context on a input, consider using an ion-note
  underneath the ion-list.
-->

<ion-input
  label="Email:"
  :counter="true"
  maxlength="100"
  helper-text="Enter an email"
  error-text="Please enter a valid email"
></ion-input>

使用舊版語法

Ionic 使用啟發式方法來偵測應用程式是否正在使用新式輸入語法。在某些情況下，可能最好繼續使用舊版語法。開發人員可以在 ion-input 上將 legacy 屬性設定為 true，以強制該輸入框執行個體使用舊版語法。

介面

InputChangeEventDetail

interface InputChangeEventDetail {
  value: string | undefined | null;
}

InputCustomEvent

雖然不是必要項目，但此介面可用於取代 CustomEvent 介面，以便使用從此元件發出的 Ionic 事件進行更強的類型檢查。

interface InputCustomEvent extends CustomEvent {
  detail: InputChangeEventDetail;
  target: HTMLIonInputElement;
}

屬性

autocapitalize

描述	指出當使用者輸入/編輯文字值時，是否以及如何自動將其大寫。可用的選項：`"off"`、`"none"`、`"on"`、`"sentences"`、`"words"`、`"characters"`。
屬性	`autocapitalize`
類型	`字串`
預設值	`'off'`

autocomplete

描述	指出瀏覽器是否可以自動完成控制項的值。
屬性	`autocomplete`
類型	"name" ｜ "email" ｜ "tel" ｜ "url" ｜ "on" ｜ "off" ｜ "honorific-prefix" ｜ "given-name" ｜ "additional-name" ｜ "family-name" ｜ "honorific-suffix" ｜ "nickname" ｜ "username" ｜ "new-password" ｜ "current-password" ｜ "one-time-code" ｜ "organization-title" ｜ "organization" ｜ "street-address" ｜ "address-line1" ｜ "address-line2" ｜ "address-line3" ｜ "address-level4" ｜ "address-level3" ｜ "address-level2" ｜ "address-level1" ｜ "country" ｜ "country-name" ｜ "postal-code" ｜ "cc-name" ｜ "cc-given-name" ｜ "cc-additional-name" ｜ "cc-family-name" ｜ "cc-number" ｜ "cc-exp" ｜ "cc-exp-month" ｜ "cc-exp-year" ｜ "cc-csc" ｜ "cc-type" ｜ "transaction-currency" ｜ "transaction-amount" ｜ "language" ｜ "bday" ｜ "bday-day" ｜ "bday-month" ｜ "bday-year" ｜ "sex" ｜ "tel-country-code" ｜ "tel-national" ｜ "tel-area-code" ｜ "tel-local" ｜ "tel-extension" ｜ "impp" ｜ "photo"
預設值	`'off'`

autocorrect

描述	當使用者輸入/編輯文字值時，是否應啟用自動校正。
屬性	`autocorrect`
類型	`"off" ｜ "on"`
預設值	`'off'`

autofocus

描述	在原生輸入元素上設定 `autofocus` 屬性。這可能不足以讓元素在頁面載入時獲得焦點。請參閱管理焦點以了解更多資訊。
屬性	`autofocus`
類型	`布林值`
預設值	`false`

clearInput

描述	如果為 `true`，則當有值時，輸入框中會出現清除圖示。按一下它可以清除輸入框。
屬性	`clear-input`
類型	`布林值`
預設值	`false`

clearInputIcon

描述	要用於清除按鈕的圖示。僅當 `clearInput` 設定為 `true` 時才適用。
屬性	`clear-input-icon`
類型	`字串｜未定義`
預設值	`未定義`

clearOnEdit

描述	如果為 `true`，則在編輯時取得焦點後會清除值。當 `type` 為 `"password"` 時，預設值為 `true`，所有其他類型則為 `false`。
屬性	`clear-on-edit`
類型	`布林值｜未定義`
預設值	`未定義`

color

描述	要從應用程式的色彩調色盤使用的色彩。預設選項為：`"primary"`、`"secondary"`、`"tertiary"`、`"success"`、`"warning"`、`"danger"`、`"light"`、`"medium"` 和 `"dark"`。如需色彩的詳細資訊，請參閱主題化。
屬性	`color`
類型	`"danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜字串｜未定義`
預設值	`未定義`

counter

描述	如果為 `true`，則字元計數器將顯示已使用的字元數與總字元限制的比率。開發人員還必須設定 `maxlength` 屬性，才能正確計算計數器。
屬性	`counter`
類型	`布林值`
預設值	`false`

counterFormatter

描述	用於格式化計數器文字的回呼。預設情況下，計數器文字會設定為「itemLength / maxLength」。如果需要從回呼內存取 `this`，請參閱https://ionic.dev.org.tw/docs/troubleshooting/runtime#accessing-this。
屬性	`未定義`
類型	`((inputLength: number, maxLength: number) => string) ｜未定義`
預設值	`未定義`

debounce

描述	設定在每次按鍵後觸發 `ionInput` 事件之前要等待的時間量 (以毫秒為單位)。
屬性	`debounce`
類型	`數字｜未定義`
預設值	`未定義`

disabled

描述	如果為 `true`，使用者將無法與輸入框互動。
屬性	`disabled`
類型	`布林值`
預設值	`false`

enterkeyhint

描述	瀏覽器要顯示哪個 Enter 鍵的提示。可能的值：`"enter"`、`"done"`、`"go"`、`"next"`、`"previous"`、`"search"` 和 `"send"`。
屬性	`enterkeyhint`
類型	`"done" ｜ "enter" ｜ "go" ｜ "next" ｜ "previous" ｜ "search" ｜ "send" ｜未定義`
預設值	`未定義`

errorText

描述	放置在輸入框下方且在偵測到錯誤時顯示的文字。
屬性	`error-text`
類型	`字串｜未定義`
預設值	`未定義`

fill

描述	項目的填滿。如果為 `"solid"`，則項目將具有背景。如果為 `"outline"`，則項目將是透明的，帶有邊框。僅在 `md` 模式下可用。
屬性	`fill`
類型	`"outline" ｜ "solid" ｜未定義`
預設值	`未定義`

helperText

描述	放置在輸入框下方且在未偵測到錯誤時顯示的文字。
屬性	`helper-text`
類型	`字串｜未定義`
預設值	`未定義`

inputmode

描述	瀏覽器顯示鍵盤的提示。可能的值包括：`"none"`、`"text"`、`"tel"`、`"url"`、`"email"`、`"numeric"`、`"decimal"` 和 `"search"`。
屬性	`inputmode`
類型	`"decimal" ｜ "email" ｜ "none" ｜ "numeric" ｜ "search" ｜ "tel" ｜ "text" ｜ "url" ｜ undefined`
預設值	`未定義`

label

描述	與輸入關聯的可見標籤。如果需要渲染純文字標籤，請使用此屬性。如果同時使用 `label` 屬性和 `label` 插槽，則 `label` 屬性將優先。
屬性	`label`
類型	`字串｜未定義`
預設值	`未定義`

labelPlacement

描述	標籤相對於輸入框的放置位置。`"start"`：標籤在 LTR 模式下會顯示在輸入框的左側，在 RTL 模式下會顯示在右側。`"end"`：標籤在 LTR 模式下會顯示在輸入框的右側，在 RTL 模式下會顯示在左側。`"floating"`：當輸入框聚焦或有值時，標籤會縮小並顯示在輸入框上方。否則，它將顯示在輸入框的頂部。`"stacked"`：標籤會縮小並顯示在輸入框上方，即使輸入框失焦或沒有值。`"fixed"`：標籤的行為與 `"start"` 相同，只是它還具有固定寬度。長文本將以省略號 ("...") 截斷。
屬性	`label-placement`
類型	`"end" ｜ "fixed" ｜ "floating" ｜ "stacked" ｜ "start"`
預設值	`'start'`

max

描述	最大值，不得小於其最小值 (min 屬性) 值。
屬性	`max`
類型	`number ｜ string ｜ undefined`
預設值	`未定義`

maxlength

描述	如果 type 屬性的值為 `text`、`email`、`search`、`password`、`tel` 或 `url`，則此屬性指定使用者可以輸入的最大字元數。
屬性	`maxlength`
類型	`數字｜未定義`
預設值	`未定義`

min

描述	最小值，不得大於其最大值 (max 屬性) 值。
屬性	`min`
類型	`number ｜ string ｜ undefined`
預設值	`未定義`

minlength

描述	如果 type 屬性的值為 `text`、`email`、`search`、`password`、`tel` 或 `url`，則此屬性指定使用者可以輸入的最小字元數。
屬性	`minlength`
類型	`數字｜未定義`
預設值	`未定義`

mode

描述	模式決定要使用的平台樣式。
屬性	`mode`
類型	`"ios" ｜ "md"`
預設值	`未定義`

multiple

描述	如果為 `true`，則使用者可以輸入多個值。當 type 屬性設定為 `"email"` 時，此屬性才適用，否則將被忽略。
屬性	`multiple`
類型	`布林值｜未定義`
預設值	`未定義`

name

描述	控制項的名稱，會與表單資料一起提交。
屬性	`name`
類型	`字串`
預設值	`this.inputId`

pattern

描述	用於檢查值的正規表示式。模式必須與整個值匹配，而不僅僅是部分子集。使用 title 屬性來描述模式，以幫助使用者。當 type 屬性的值為 `"text"`、`"search"`、`"tel"`、`"url"`、`"email"`、`"date"` 或 `"password"` 時，此屬性才適用，否則將被忽略。當 type 屬性為 `"date"` 時，`pattern` 只會用於不原生支援 `"date"` 輸入類型的瀏覽器。有關更多資訊，請參閱 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date。
屬性	`pattern`
類型	`字串｜未定義`
預設值	`未定義`

placeholder

描述	在輸入框有值之前顯示的說明文字。只有當 `type` 屬性設定為 `"email"`、`"number"`、`"password"`、`"search"`、`"tel"`、`"text"` 或 `"url"` 時，此屬性才適用，否則將被忽略。
屬性	`placeholder`
類型	`字串｜未定義`
預設值	`未定義`

readonly

描述	如果為 `true`，則使用者無法修改該值。
屬性	`readonly`
類型	`布林值`
預設值	`false`

required

描述	如果為 `true`，則使用者必須先填寫值才能提交表單。
屬性	`required`
類型	`布林值`
預設值	`false`

shape

描述	輸入框的形狀。如果為「round」，則會有較大的邊框半徑。
屬性	`shape`
類型	`"round" ｜ undefined`
預設值	`未定義`

spellcheck

描述	如果為 `true`，則該元素將進行拼寫和語法檢查。
屬性	`spellcheck`
類型	`布林值`
預設值	`false`

step

描述	與 min 和 max 屬性一起使用，以限制可以設定值的增量。可能的值包括：`"any"` 或正浮點數。
屬性	`step`
類型	`字串｜未定義`
預設值	`未定義`

type

描述	要顯示的控制項類型。預設類型為 text。
屬性	`type`
類型	`"date" ｜ "datetime-local" ｜ "email" ｜ "month" ｜ "number" ｜ "password" ｜ "search" ｜ "tel" ｜ "text" ｜ "time" ｜ "url" ｜ "week"`
預設值	`'text'`

value

描述	輸入框的值。
屬性	`value`
類型	`null ｜ number ｜ string ｜ undefined`
預設值	`''`

事件

名稱	描述	冒泡
`ionBlur`	當輸入框失去焦點時發射。	`true`
`ionChange`	當使用者修改輸入框的值時，會觸發 `ionChange` 事件。與 `ionInput` 事件不同，`ionChange` 事件僅在變更提交時觸發，而不是在使用者輸入時觸發。根據使用者與元素的互動方式，`ionChange` 事件會在不同的時間點觸發：- 當使用者明確提交變更時 (例如，從日期選擇器中選擇日期 `<ion-input type="date">`、按下 "Enter" 鍵等)。- 當元素在值變更後失去焦點時：對於使用者互動為輸入的元素。當以程式方式設定 `value` 屬性時，此事件不會發射。	`true`
`ionFocus`	當輸入框獲得焦點時發射。	`true`
`ionInput`	每次使用者修改輸入框的值時，都會觸發 `ionInput` 事件。與 `ionChange` 事件不同，`ionInput` 事件會在每次變更輸入框的值時觸發。這通常發生在使用者輸入時的每個按鍵上。對於接受文字輸入的元素 (`type=text`、`type=tel` 等)，介面是 `InputEvent`；對於其他元素，介面是 `Event`。如果輸入在編輯時被清除，則類型為 `null`。	`true`

方法

getInputElement

描述	傳回幕後使用的原生 `<input>` 元素。
簽名	`getInputElement() => Promise<HTMLInputElement>`

setFocus

描述	在 `ion-input` 中將焦點設定在原生 `input` 上。請使用此方法，而不是全域的 `input.focus()`。希望在頁面進入時聚焦輸入框的開發人員應在 `ionViewDidEnter()` 生命周期方法中呼叫 `setFocus()`。希望在顯示覆蓋層時聚焦輸入框的開發人員應在 `didPresent` 解析後呼叫 `setFocus`。有關更多資訊，請參閱管理焦點。
簽名	`setFocus() => Promise<void>`

CSS Shadow Parts

此元件沒有可用的 CSS shadow parts。

CSS 自訂屬性

名稱	描述
`--background`	輸入框的背景
`--border-color`	當使用輔助文字、錯誤文字或計數器時，輸入框下方邊框的顏色
`--border-radius`	輸入框的半徑。當使用 fill="outline" 時，較大的半徑可能會顯示不均勻；如果需要，請改用 shape="round" 或增加 --padding-start。
`--border-style`	當使用輔助文字、錯誤文字或計數器時，輸入框下方邊框的樣式
`--border-width`	當使用輔助文字、錯誤文字或計數器時，輸入框下方邊框的寬度
`--color`	輸入框文字的顏色
`--highlight-color-focused`	輸入框獲得焦點時，突出顯示的顏色
`--highlight-color-invalid`	輸入框無效時，突出顯示的顏色
`--highlight-color-valid`	輸入框有效時，突出顯示的顏色
`--highlight-height`	輸入框上突出顯示的高度。僅適用於 md 模式。
`--padding-bottom`	輸入框的底部內距
`--padding-end`	如果方向是從左到右，則輸入框的右側內距；如果方向是從右到左，則為左側內距
`--padding-start`	如果方向是從左到右，則輸入框的左側內距；如果方向是從右到左，則為右側內距
`--padding-top`	輸入框的頂部內距
`--placeholder-color`	輸入框預留位置文字的顏色
`--placeholder-font-style`	輸入框預留位置文字的字體樣式
`--placeholder-font-weight`	輸入框預留位置文字的字體粗細
`--placeholder-opacity`	輸入框預留位置文字的不透明度

名稱	描述
`--background`	輸入框的背景
`--border-color`	當使用輔助文字、錯誤文字或計數器時，輸入框下方邊框的顏色
`--border-radius`	輸入框的半徑。當使用 fill="outline" 時，較大的半徑可能會顯示不均勻；如果需要，請改用 shape="round" 或增加 --padding-start。
`--border-style`	當使用輔助文字、錯誤文字或計數器時，輸入框下方邊框的樣式
`--border-width`	當使用輔助文字、錯誤文字或計數器時，輸入框下方邊框的寬度
`--color`	輸入框文字的顏色
`--highlight-color-focused`	輸入框獲得焦點時，突出顯示的顏色
`--highlight-color-invalid`	輸入框無效時，突出顯示的顏色
`--highlight-color-valid`	輸入框有效時，突出顯示的顏色
`--highlight-height`	輸入框上突出顯示的高度。僅適用於 md 模式。
`--padding-bottom`	輸入框的底部內距
`--padding-end`	如果方向是從左到右，則輸入框的右側內距；如果方向是從右到左，則為左側內距
`--padding-start`	如果方向是從左到右，則輸入框的左側內距；如果方向是從右到左，則為右側內距
`--padding-top`	輸入框的頂部內距
`--placeholder-color`	輸入框預留位置文字的顏色
`--placeholder-font-style`	輸入框預留位置文字的字體樣式
`--placeholder-font-weight`	輸入框預留位置文字的字體粗細
`--placeholder-opacity`	輸入框預留位置文字的不透明度

插槽

名稱	描述
`end`	顯示在輸入框尾端的內容。(實驗性)
`label`	要與輸入框關聯的標籤文字。使用 `labelPlacement` 屬性來控制標籤相對於輸入框的放置位置。如果您需要使用自訂 HTML 渲染標籤，請使用此選項。(實驗性)
`start`	顯示在輸入框前端的內容。(實驗性)

基本用法​

類型​

標籤​

標籤放置​

標籤插槽（實驗性）​

沒有可見的標籤​

清除選項​

已填寫的輸入框​

輔助和錯誤文字​

輸入計數器​

篩選使用者輸入​

輸入遮罩​

起始和結束插槽 (實驗性)​

主題化​

色彩​

CSS 自訂屬性​

從舊版輸入語法遷移​

使用新式語法​

使用舊版語法​

介面​

InputChangeEventDetail​

InputCustomEvent​

屬性​

autocapitalize​

autocomplete​

autocorrect​

autofocus​

clearInput​

clearInputIcon​

clearOnEdit​

color​

counter​

counterFormatter​

debounce​

disabled​

enterkeyhint​

errorText​

fill​

helperText​

inputmode​

label​

labelPlacement​

max​

maxlength​

min​

minlength​

mode​

multiple​

name​

pattern​

placeholder​

readonly​

required​

shape​

spellcheck​

step​

type​

value​

事件​

方法​

getInputElement​

setFocus​

CSS Shadow Parts​

CSS 自訂屬性​

插槽​

目錄

基本用法

類型

標籤

標籤放置

標籤插槽（實驗性）

沒有可見的標籤

清除選項

已填寫的輸入框

輔助和錯誤文字

輸入計數器

篩選使用者輸入

輸入遮罩

起始和結束插槽 (實驗性)

主題化

色彩

CSS 自訂屬性

從舊版輸入語法遷移

使用新式語法

使用舊版語法

介面

InputChangeEventDetail

InputCustomEvent

屬性

autocapitalize

autocomplete

autocorrect

autofocus

clearInput

clearInputIcon

clearOnEdit

color

counter

counterFormatter

debounce

disabled

enterkeyhint

errorText

fill

helperText

inputmode

label

labelPlacement

max

maxlength

min

minlength

mode

multiple

name

pattern

placeholder

readonly

required

shape

spellcheck

step

type

value

事件

方法

getInputElement

setFocus

CSS Shadow Parts

CSS 自訂屬性

插槽