scoped
The input component is a wrapper to the HTML input element with custom styling and additional functionality. It accepts most of the same properties as the HTML input, but works great on desktop devices and integrates with the keyboard on mobile devices.
The input component is meant for text type inputs only, such as "text", "password", "email", "number", "search", "tel", and "url". It supports all standard text input events including keyup, keydown, keypress, and more. The default type is "text".
Labels will take up the width of their content by default. This positioning can be changed to be a fixed width, stacked, or floating label.
Inputs offer two options for clearing the input based on how you interact with it. The first way is by adding the clearInput property which will show a clear button when the input has a value. The second way is the clearOnEdit property which will clear the input after it has been blurred and then typed in again. Inputs with a type set to "password" will have clearOnEdit enabled by default.
Material Design offers filled styles for an input when it is inside of an item. The fill property on the item can be set to either "solid" or "outline".
Helper & Error Text
Helper & error text can be used inside of an item with an input by slotting a note in the "helper" and "error" slots. The error slot will not be displayed unless the ion-invalid class is added to the ion-item. In Angular, this is done automatically through form validation. In JavaScript, React and Vue, the class needs to be manually added based on your own validation.
The item counter is helper text that displays under an input to notify the user of how many characters have been entered out of the total that the input will accept. When adding counter, the default behavior is to format the value that gets displayed as inputLength / maxLength. This behavior can be customized by passing in a formatter function to the counterFormatter property.
Developers can use the ionInput event to update the input value in response to user input such as a keypress. This is useful for filtering out invalid or unwanted characters.
When storing the value in a state variable, we recommend updating both the state variable and the ion-input component value. This ensures that the state variable and the ion-input component value remain in sync.
Input uses scoped encapsulation, which means it will automatically scope its CSS by appending each of the styles with an additional class at runtime. Overriding scoped selectors in CSS requires a higher specificity selector. Targeting the ion-input for customization will not work; therefore we recommend adding a class and customizing it that way.
interface InputChangeEventDetail {
value: string | undefined | null;
}
While not required, this interface can be used in place of the CustomEvent interface for stronger typing with Ionic events emitted from this component.
interface InputCustomEvent extends CustomEvent {
detail: InputChangeEventDetail;
target: HTMLIonInputElement;
}
| Description | この属性は無視されます。 Deprecated |
| Attribute | accept |
| Type | string ｜ undefined |
| Default | undefined |
| Description | Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user. Available options: "off", "none", "on", "sentences", "words", "characters". |
| Attribute | autocapitalize |
| Type | string |
| Default | 'off' |
| Description | コントロールの値が、ブラウザによって自動的に補完されるかどうかを示します。 |
| Attribute | autocomplete |
| Type | "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" |
| Default | 'off' |
| Description | ユーザーがテキスト値を入力/編集する際に、自動補正を有効にするかどうか。 |
| Attribute | autocorrect |
| Type | "off" ｜ "on" |
| Default | 'off' |
| Description | この Boolean 属性により、ページロード時にフォームコントロールにInputフォーカスが当たるように指定することができます。 |
| Attribute | autofocus |
| Type | boolean |
| Default | false |
| Description | trueの場合、値があるときにInputにクリアアイコンが表示されます。これをクリックすると、入力がクリアされます。 |
| Attribute | clear-input |
| Type | boolean |
| Default | false |
| Description | trueの場合、編集時にフォーカスされた後、値がクリアされる。デフォルトは type が "password" のとき true で、それ以外のときは false です。 |
| Attribute | clear-on-edit |
| Type | boolean ｜ undefined |
| Default | undefined |
| Description | The color to use from your application's color palette. Default options are: "primary", "secondary", "tertiary", "success", "warning", "danger", "light", "medium", and "dark". For more information on colors, see theming. |
| Attribute | color |
| Type | "danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string ｜ undefined |
| Default | undefined |
| Description | キーを押すたびに ionChange イベントが発生するまでの待ち時間をミリ秒単位で設定します。これは ngModel や v-model などのフォームバインディングにも影響します。 |
| Attribute | debounce |
| Type | number |
| Default | 0 |
| Description | trueの場合、ユーザはInputと対話することができません。 |
| Attribute | disabled |
| Type | boolean |
| Default | false |
| Description | A hint to the browser for which enter key to display. Possible values: "enter", "done", "go", "next", "previous", "search", and "send". |
| Attribute | enterkeyhint |
| Type | "done" ｜ "enter" ｜ "go" ｜ "next" ｜ "previous" ｜ "search" ｜ "send" ｜ undefined |
| Default | undefined |
| Description | A hint to the browser for which keyboard to display. Possible values: "none", "text", "tel", "url", "email", "numeric", "decimal", and "search". |
| Attribute | inputmode |
| Type | "decimal" ｜ "email" ｜ "none" ｜ "numeric" ｜ "search" ｜ "tel" ｜ "text" ｜ "url" ｜ undefined |
| Default | undefined |
| Description | 最大値で、その最小値（min属性）より小さくてはなりません。 |
| Attribute | max |
| Type | number ｜ string ｜ undefined |
| Default | undefined |
| Description | type属性の値が text, email, search, password, tel, または url の場合、この属性はユーザーが入力できる最大文字数を指定します。 |
| Attribute | maxlength |
| Type | number ｜ undefined |
| Default | undefined |
| Description | 最小値で、その最大値（max属性）より大きくてはなりません。 |
| Attribute | min |
| Type | number ｜ string ｜ undefined |
| Default | undefined |
| Description | type属性の値が text, email, search, password, tel, または url の場合、この属性はユーザーが入力できる最小文字数を指定します。 |
| Attribute | minlength |
| Type | number ｜ undefined |
| Default | undefined |
| Description | modeは、どのプラットフォームのスタイルを使用するかを決定します。 |
| Attribute | mode |
| Type | "ios" ｜ "md" |
| Default | undefined |
| Description | trueの場合、ユーザは複数の値を入力することができる。この属性は、type属性が "email" に設定されている場合に適用され、それ以外の場合は無視される。 |
| Attribute | multiple |
| Type | boolean ｜ undefined |
| Default | undefined |
| Description | フォームデータとともに送信されるコントロールの名前。 |
| Attribute | name |
| Type | string |
| Default | this.inputId |
| Description | 値をチェックするための正規表現。パターンは、部分的なものだけでなく、値全体にマッチする必要があります。title 属性を使って、ユーザーを助けるためにパターンを説明します。この属性は、type属性の値が "text", "search", "tel", "url", "email", "date", または "password" であるときに適用され、それ以外のときは無視されます。type 属性が "date" の場合、pattern は "date" Inputタイプをネイティブにサポートしないブラウザでのみ使用されます。詳しくは https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date を参照してください。 |
| Attribute | pattern |
| Type | string ｜ undefined |
| Default | undefined |
| Description | Instructional text that shows before the input has a value. This property applies only when the type property is set to "email", "number", "password", "search", "tel", "text", or "url", otherwise it is ignored. |
| Attribute | placeholder |
| Type | string ｜ undefined |
| Default | undefined |
| Description | trueの場合、ユーザーは値を変更することができません。 |
| Attribute | readonly |
| Type | boolean |
| Default | false |
| Description | trueの場合、ユーザーはフォームを送信する前に値を入力する必要があります。 |
| Attribute | required |
| Type | boolean |
| Default | false |
| Description | コントロールの初期サイズ。ただし、type属性の値が "text" または "password" である場合は、整数値の文字数です。この属性は、type属性が "text", "search", "tel", "url", "email", または "password" に設定されている場合にのみ適用され、それ以外の場合は無視されます。 |
| Attribute | size |
| Type | number ｜ undefined |
| Default | undefined |
| Description | trueの場合、その要素のスペルチェックと文法チェックが行われる。 |
| Attribute | spellcheck |
| Type | boolean |
| Default | false |
| Description | Works with the min and max attributes to limit the increments at which a value can be set. Possible values are: "any" or a positive floating point number. |
| Attribute | step |
| Type | string ｜ undefined |
| Default | undefined |
| Description | 表示するコントロールの種類を指定します。デフォルトのタイプはテキストです。 |
| Attribute | type |
| Type | "date" ｜ "datetime-local" ｜ "email" ｜ "month" ｜ "number" ｜ "password" ｜ "search" ｜ "tel" ｜ "text" ｜ "time" ｜ "url" ｜ "week" |
| Default | 'text' |
| Description | 入力された値です。 |
| Attribute | value |
| Type | null ｜ number ｜ string ｜ undefined |
| Default | '' |
| Name | Description |
|---|
ionBlur | Inputのフォーカスが外れたときに発行されます。 |
ionChange | 値が変更されたときに発行されます。 |
ionFocus | Inputにフォーカスが当たったときに発行されます。 |
ionInput | キーボード入力が発生したときに発行されます。 |
| Description | 要素の内部で使用されているネイティブの <input> 要素を返します。 |
| Signature | getInputElement() => Promise<HTMLInputElement> |
| Description | Sets focus on the native input in ion-input. Use this method instead of the global input.focus().
Developers who wish to focus an input when a page enters should call setFocus() in the ionViewDidEnter() lifecycle method. |
| Signature | setFocus() => Promise<void> |
No CSS shadow parts available for this component.
| Name | Description |
|---|
--background | Inputの背景 |
--color | Inputのテキストの色 |
--padding-bottom | InputのBottom Padding |
--padding-end | 入力の方向が左から右の場合はRight Padding、右から左の場合はLeft Paddingとなります。 |
--padding-start | 入力の方向が左から右の場合はLeft Padding、右から左の場合はRight Paddingとなります。 |
--padding-top | InputのTop Padding |
--placeholder-color | InputのPlaceholderテキストの色 |
--placeholder-font-style | InputのPlaceholderテキストのFont Style |
--placeholder-font-weight | InputのPlaceholderテキストのFont Weight |
--placeholder-opacity | InputのPlaceholderテキストの不透明度 |
No slots available for this component.