バージョン: v8

ion-textarea

The textarea component is used for multi-line text input. A native textarea element is rendered inside of the component. The user experience and interactivity of the textarea component is improved by having control over the native textarea.

Unlike the native textarea element, the Ionic textarea does not support loading its value from the inner content. The textarea value should be set in the value attribute.

The textarea component accepts the native textarea attributes in addition to the Ionic properties.

Basic Usage

Labels

Labels should be used to describe the textarea. They can be used visually, and they will also be read out by screen readers when the user is focused on the textarea. This makes it easy for the user to understand the intent of the textarea. Textarea has several ways to assign a label:

label property: used for plaintext labels
label slot: used for custom HTML labels (experimental)
aria-label: used to provide a label for screen readers but adds no visible label

Label Placement

Labels will take up the width of their content by default. Developers can use the labelPlacement property to control how the label is placed relative to the control.

Label Slot (experimental)

While plaintext labels should be passed in via the label property, if custom HTML is needed, it can be passed through the label slot instead.

Note that this feature is considered experimental because it relies on a simulated version of Web Component slots. As a result, the simulated behavior may not exactly match the native slot behavior.

No Visible Label

If no visible label is needed, developers should still supply an aria-label so the textarea is accessible to screen readers.

Filled Textareas

Material Design offers filled styles for a textarea. The fill property on the item can be set to either "solid" or "outline".

Filled textareas can be used on iOS by setting the textarea's mode to md.

警告

Textareas that use fill should not be used in an ion-item due to styling conflicts between the components.

Helper & Error Text

Helper and error text can be used inside of a textarea with the helperText and errorText property. The error text will not be displayed unless the ion-invalid and ion-touched classes are added to the ion-textarea. This ensures errors are not shown before the user has a chance to enter data.

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.

Textarea Counter

The textarea counter is text that displays under a textarea to notify the user of how many characters have been entered out of the total that the textarea 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.

Autogrow

When the autoGrow property is set to true, the textarea will grow and shrink based on its contents.

Clear on Edit

Setting the clearOnEdit property to true will clear the textarea after it has been blurred and then typed in again.

Start and End Slots (experimental)

The start and end slots can be used to place icons, buttons, or prefix/suffix text on either side of the textarea.

Note that this feature is considered experimental because it relies on a simulated version of Web Component slots. As a result, the simulated behavior may not exactly match the native slot behavior.

注記

In most cases, Icon components placed in these slots should have aria-hidden="true". See the Icon accessibility docs for more information.

If slot content is meant to be interacted with, it should be wrapped in an interactive element such as a Button. This ensures that the content can be tabbed to.

Theming

Interfaces

TextareaChangeEventDetail

interface TextareaChangeEventDetail {
  value?: string | null;
}

TextareaCustomEvent

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 TextareaCustomEvent extends CustomEvent {
  detail: TextareaChangeEventDetail;
  target: HTMLIonTextareaElement;
}

Properties

autoGrow

Description	`true`の場合、textareaコンテナはtextareaの内容に応じて拡大・縮小します。
Attribute	`auto-grow`
Type	`boolean`
Default	`false`

autocapitalize

Description	テキスト値がユーザーによって入力／編集される際に、自動的に大文字にするかどうか、またどのようにするかについて示します。利用可能なオプション: `"off"`, `"none"`, `"on"`, `"sentences"`, `"words"`, `"characters"`.
Attribute	`autocapitalize`
Type	`string`
Default	`'none'`

autofocus

Description	ネイティブの入力要素に `autofocus` 属性を設定します。ページロード時に要素がフォーカスされるには、これだけでは不十分かもしれません。詳しくはmanaging focusを参照してください。
Attribute	`autofocus`
Type	`boolean`
Default	`false`

clearOnEdit

Description	`true`の場合、編集時にフォーカスが当たった後、値がクリアされる。
Attribute	`clear-on-edit`
Type	`boolean`
Default	`false`

color

Description	アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, と `"dark"` です．色に関する詳しい情報は theming を参照してください。
Attribute	`color`
Type	`"danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string ｜ undefined`
Default	`undefined`

cols

Description	テキストコントロールの可視幅を、平均文字幅で指定します。指定する場合は、正の整数である必要があります。
Attribute	`cols`
Type	`number ｜ undefined`
Default	`undefined`

counter

Description	`true`の場合、文字カウンタが使用された文字の比率と総文字数制限を表示します。カウンターを正しく計算するために、開発者は `maxlength` プロパティも設定する必要があります。
Attribute	`counter`
Type	`boolean`
Default	`false`

counterFormatter

Description	カウンターのテキストをフォーマットするためのコールバック。デフォルトでは、カウンタのテキストは "itemLength / maxLength" に設定される。コールバック内から `this` にアクセスする必要がある場合は https://ionicframework.com/docs/troubleshooting/runtime#accessing-this を参照。
Attribute	`counter-formatter`
Type	`((inputLength: number, maxLength: number) => string) ｜ undefined`
Default	`undefined`

debounce

Description	キーを押すたびに `ionInput` イベントが発生するまでの待ち時間をミリ秒単位で設定します。
Attribute	`debounce`
Type	`number ｜ undefined`
Default	`undefined`

disabled

Description	`true`の場合、ユーザはテキストエリアと対話することができません。
Attribute	`disabled`
Type	`boolean`
Default	`false`

enterkeyhint

Description	どのエンターキーを表示するかのブラウザへのヒント。指定可能な値。`"enter"`, `"done"`, `"go"`, `"next"`, `"previous"`, `"search"`, and `"send"`.
Attribute	`enterkeyhint`
Type	`"done" ｜ "enter" ｜ "go" ｜ "next" ｜ "previous" ｜ "search" ｜ "send" ｜ undefined`
Default	`undefined`

errorText

Description	テキストエリアの下に配置され、エラーが検出されたときに表示されるテキストです。
Attribute	`error-text`
Type	`string ｜ undefined`
Default	`undefined`

fill

Description	アイテムの塗りつぶし。もし `"solid"` ならば、アイテムは背景を持つようになります。もし `"outline"` ならば、アイテムはボーダー付きの透明なものになります。`md`モードでのみ使用可能です。
Attribute	`fill`
Type	`"outline" ｜ "solid" ｜ undefined`
Default	`undefined`

helperText

Description	textareaの下に配置され、エラーが検出されなかった場合に表示されるテキストです。
Attribute	`helper-text`
Type	`string ｜ undefined`
Default	`undefined`

inputmode

Description	どのキーボードを表示するかのブラウザへのヒント。指定可能な値。`"none"`, `"text"`, `"tel"`, `"url"`, `"email"`, `"numeric"`, `"decimal"`, and `"search"`.
Attribute	`inputmode`
Type	`"decimal" ｜ "email" ｜ "none" ｜ "numeric" ｜ "search" ｜ "tel" ｜ "text" ｜ "url" ｜ undefined`
Default	`undefined`

label

Description	textareaに関連付けられた可視ラベル。プレーンテキストのラベルをレンダリングする必要がある場合に使用する。両方が使用されている場合、`label` プロパティが `label` スロットよりも優先される。
Attribute	`label`
Type	`string ｜ undefined`
Default	`undefined`

labelPlacement

Description	テキストエリアと相対的にラベルを配置する場所。"start"`：ラベルはLTRではテキストエリアの左側に、RTLでは右側に表示されます。`"end"`：ラベルはLTRではテキストエリアの右側に、RTLでは左側に表示されます。"floating"`：ラベルは、テキストエリアにフォーカスが当たっているか、値がある場合、小さく表示され、テキストエリアの上に表示されます。それ以外の場合はtextareaの上に表示されます。`"stacked"`：テキストエリアがぼやけた状態や値がない場合でも、ラベルは小さく表示され、テキストエリアの上に表示されます。固定"`：ラベルの幅が固定される以外は、`"start"`と同じ動作になります。長いテキストは省略記号（"..."）で切り捨てられます。
Attribute	`label-placement`
Type	`"end" ｜ "fixed" ｜ "floating" ｜ "stacked" ｜ "start"`
Default	`'start'`

maxlength

Description	この属性は、ユーザが入力できる最大文字数を指定します。
Attribute	`maxlength`
Type	`number ｜ undefined`
Default	`undefined`

minlength

Description	この属性は、ユーザーが入力できる最小の文字数を指定します。
Attribute	`minlength`
Type	`number ｜ undefined`
Default	`undefined`

mode

Description	modeは、どのプラットフォームのスタイルを使用するかを決定します。 This is a virtual property that is set once during initialization and will not update if you change its value after the initial render.
Attribute	`mode`
Type	`"ios" ｜ "md"`
Default	`undefined`

name

Description	フォームデータとともに送信されるコントロールの名前。
Attribute	`name`
Type	`string`
Default	`this.inputId`

placeholder

Description	入力が値を持つ前に表示される指示文。
Attribute	`placeholder`
Type	`string ｜ undefined`
Default	`undefined`

readonly

Description	`true`の場合、ユーザーは値を変更することができません。
Attribute	`readonly`
Type	`boolean`
Default	`false`

required

Description	`true`の場合、ユーザーはフォームを送信する前に値を入力する必要があります。
Attribute	`required`
Type	`boolean`
Default	`false`

rows

Description	コントロールの可視テキスト行数。
Attribute	`rows`
Type	`number ｜ undefined`
Default	`undefined`

shape

Description	テキストエリアの形状を指定します。round "の場合、ボーダーの半径が大きくなります。
Attribute	`shape`
Type	`"round" ｜ undefined`
Default	`undefined`

spellcheck

Description	`true`の場合、その要素のスペルチェックと文法チェックが行われる。
Attribute	`spellcheck`
Type	`boolean`
Default	`false`

value

Description	textareaの値です。
Attribute	`value`
Type	`null ｜ string ｜ undefined`
Default	`''`

wrap

Description	コントロールがテキストをどのように折り返すかを示します。
Attribute	`wrap`
Type	`"hard" ｜ "off" ｜ "soft" ｜ undefined`
Default	`undefined`

Events

Name	Description	Bubbles
`ionBlur`	Inputのフォーカスが外れたときに発行されます。	`true`
`ionChange`	onChange `イベントは、ユーザが textarea の値を変更したときに発生する。`ionInput `イベントとは異なり、`ionChange`イベントは値が変更された後に要素のフォーカスが外れたときに発生する。このイベントは、プログラムで`value` プロパティを設定した場合には発生しない。	`true`
`ionFocus`	Inputにフォーカスが当たったときに発行されます。	`true`
`ionInput`	`ionInput` イベントは、ユーザが textarea の値を変更するたびに発生する。`ionChange` イベントとは異なり、`ionInput` イベントは textarea の値が変更されるたびに発生する。これは通常、ユーザがキーを入力するたびに発生する。 `clearOnEdit` が有効な場合、ユーザが textarea をクリアするためにキーダウンを行うと、`ionInput` イベントが発生する。	`true`

Methods

getInputElement

Description	要素の内部で使用されるネイティブの `<textarea>` 要素を返します。
Signature	`getInputElement() => Promise<HTMLTextAreaElement>`

setFocus

Description	`ion-textarea`のネイティブ `textarea` にフォーカスを設定する。グローバルメソッド `textarea.focus()` の代わりにこのメソッドを使用する。詳細は managing focus を参照してください。
Signature	`setFocus() => Promise<void>`

CSS Shadow Parts

No CSS shadow parts available for this component.

CSS Custom Properties

Name	Description
`--background`	textareaの背景
`--border-color`	ヘルパーテキスト、エラーテキスト、カウンターを使用する場合のテキストエリア下のボーダーの色
`--border-radius`	テキストエリアの境界半径
`--border-style`	ヘルパーテキスト、エラーテキスト、カウンター使用時のテキストエリア下のボーダーのスタイル
`--border-width`	ヘルパーテキスト、エラーテキスト、カウンターを使用する場合のテキストエリア下のボーダーの幅
`--color`	本文の色
`--highlight-color-focused`	フォーカスされたときのテキストエリアのハイライトの色
`--highlight-color-invalid`	無効時のテキストエリア上のハイライトの色
`--highlight-color-valid`	有効時のテキストエリアのハイライトの色
`--highlight-height`	テキストエリアのハイライトの高さ。mdモードにのみ適用される。
`--padding-bottom`	テキストエリアのBottom Padding
`--padding-end`	テキストエリアの方向が左から右の場合はRight Padding、右から左の場合はLeft Paddingを使用します。
`--padding-start`	textareaの方向が左から右の場合はLeft Padding、右から左の場合はRight Padding。
`--padding-top`	textareaのTop Padding
`--placeholder-color`	Placeholderテキストの色
`--placeholder-font-style`	Placeholderテキストのスタイル
`--placeholder-font-weight`	Placeholderテキストの重さ
`--placeholder-opacity`	Placeholderテキストの不透明度

Name	Description
`--background`	textareaの背景
`--border-color`	ヘルパーテキスト、エラーテキスト、カウンターを使用する場合のテキストエリア下のボーダーの色
`--border-radius`	テキストエリアの境界半径
`--border-style`	ヘルパーテキスト、エラーテキスト、カウンター使用時のテキストエリア下のボーダーのスタイル
`--border-width`	ヘルパーテキスト、エラーテキスト、カウンターを使用する場合のテキストエリア下のボーダーの幅
`--color`	本文の色
`--highlight-color-focused`	フォーカスされたときのテキストエリアのハイライトの色
`--highlight-color-invalid`	無効時のテキストエリア上のハイライトの色
`--highlight-color-valid`	有効時のテキストエリアのハイライトの色
`--highlight-height`	テキストエリアのハイライトの高さ。mdモードにのみ適用される。
`--padding-bottom`	テキストエリアのBottom Padding
`--padding-end`	テキストエリアの方向が左から右の場合はRight Padding、右から左の場合はLeft Paddingを使用します。
`--padding-start`	textareaの方向が左から右の場合はLeft Padding、右から左の場合はRight Padding。
`--padding-top`	textareaのTop Padding
`--placeholder-color`	Placeholderテキストの色
`--placeholder-font-style`	Placeholderテキストのスタイル
`--placeholder-font-weight`	Placeholderテキストの重さ
`--placeholder-opacity`	Placeholderテキストの不透明度

Slots

Name	Description
`end`	textarea の末尾に表示する内容。(実験的)
`label`	テキストエリアに関連付けるラベルテキスト。labelPlacement`プロパティを使用して、textareaに対するラベルの位置を制御する。ラベルをカスタム HTML でレンダリングする必要がある場合に使用します。(実験的)
`start`	textarea の前端に表示する内容。(実験的)

Basic Usage​

Labels​

Label Placement​

Label Slot (experimental)​

No Visible Label​

Filled Textareas​

Helper & Error Text​

Textarea Counter​

Autogrow​

Clear on Edit​

Start and End Slots (experimental)​

Theming​

Interfaces​

TextareaChangeEventDetail​

TextareaCustomEvent​

Properties​

autoGrow​

autocapitalize​

autofocus​

clearOnEdit​

color​

cols​

counter​

counterFormatter​

debounce​

disabled​

enterkeyhint​

errorText​

fill​

helperText​

inputmode​

label​

labelPlacement​

maxlength​

minlength​

mode​

name​

placeholder​

readonly​

required​

rows​

shape​

spellcheck​

value​

wrap​

Events​

Methods​

getInputElement​

setFocus​

CSS Shadow Parts​

CSS Custom Properties​

Slots​

Contents