Version: v8

ion-textarea

textareaコンポーネントは、複数行のテキスト入力に使用されます。ネイティブの textarea 要素は、コンポーネントの内部でレンダリングされます。ネイティブのtextareaを制御することで、textareaコンポーネントのユーザーエクスペリエンスとインタラクティブ性を向上させることができます。

ネイティブのtextarea要素とは異なり、Ionicのtextareaは要素内部のコンテンツからその値を読み込むことをサポートしていません。textareaの値はvalue属性で設定しなくてはなりません。

textareaコンポーネントはIonicのプロパティに加えてネイティブのtextareaの属性に対応します。

基本的な使い方

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

ラベルは、デフォルトでそのコンテンツの幅を占めます。開発者は labelPlacement プロパティを使用して、ラベルがどのように配置されるかを制御することができます。

Label Slot (実験的)

プレーンテキストのラベルは label プロパティを通して渡されるべきですが、カスタム HTML が必要な場合は、代わりに label スロットを通して渡すことができます。

この機能は、Web Component slotsのシミュレート版に依存しているため、実験的なものとみなされていることに注意してください。その結果、シミュレートされた動作はネイティブのスロットの動作と完全に一致するとは限りません。

No Visible Label

ラベルの表示が必要ない場合でも、開発者はaria-labelを指定して、textareaがスクリーンリーダーにアクセスできるようにすべきです。

Filled Textareas

Material Designでは、テキストエリアの塗りつぶしスタイルが用意されています。アイテムの fill プロパティは "solid" または "outline" のいずれかに設定することができます。

iOSでは、Textareasのmodeをmdに設定することで、Filled Textareasを使うことができます。

warning

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

Helper & Error Text

ヘルパーテキストとエラーテキストは、helperText と errorText プロパティを使って textarea 内で使用することができます。エラーテキストは、ion-invalid と ion-touched クラスが ion-textarea に追加されていない限り表示されません。これにより、ユーザがデータを入力する前にエラーが表示されることはありません。

Angularでは、これはフォームバリデーションによって自動的に行われます。JavaScript、React、Vueでは、独自のバリデーションに基づいてクラスを手動で追加する必要があります。

Textarea Counter

textareaカウンターは、textareaの下に表示されるテキストで、textareaが受け付ける合計文字数のうち、何文字が入力されたかをユーザーに通知します。カウンターを追加する場合、デフォルトの動作は、表示される値を inputLength / maxLength としてフォーマットすることです。この動作は、counterFormatterプロパティにフォーマッタ関数を渡すことでカスタマイズすることができます。

Autogrow

autoGrowプロパティがtrueに設定されている場合、テキストエリアはその内容に基づいて拡大・縮小します。

Clear on Edit

clearOnEditプロパティをtrueに設定すると、テキストエリアが編集削除された後、再度入力されるとクリアされます。

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.

note

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.

レガシーtextarea構文からの移行

Ionic 7.0では、よりシンプルなtextareaの構文が導入されました。この新しい構文は、textareaを設定するために必要な定型文を減らし、アクセシビリティの問題を解決し、開発者の体験を向上させます。

開発者はこの移行を一度に1つのtextareaで行うことができます。開発者は従来の構文を使い続けることができますが、できるだけ早く移行することをお勧めします。

最新の構文の使い方

最新の構文を使うには、3つのステップがあります。

ion-label を削除して、代わりに ion-textarea の label プロパティを使用します。ラベルの配置は ion-textarea の labelPlacement プロパティを使用して設定することができる。
テキストエリア固有のプロパティを ion-item から ion-textarea に移動します。これには、counter、counterFormatter、fill、shapeプロパティが含まれます。
ion-item の helper と error スロットの使用を削除し、代わりに ion-textarea の helperText と errorText プロパティを使用します。

JavaScript
Angular
React
Vue

<!-- Label and Label Position -->

<!-- Before -->
<ion-item>
  <ion-label position="floating">Label:</ion-label>
  <ion-textarea></ion-textarea>
</ion-item>

<!-- After -->
<ion-item>
  <ion-textarea label="Label:" label-placement="floating"></ion-textarea>
</ion-item>


<!-- Fill -->

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

<!-- After -->

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

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

<!-- Before -->
<ion-item counter="true">
  <ion-label position="floating">Label:</ion-label>
  <ion-textarea maxlength="100"></ion-textarea>
  <div slot="helper">Enter text</div>
  <div slot="error">Please enter text</div>
</ion-item>

<!-- After -->

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

<ion-textarea
  label="Label:"
  counter="true"
  maxlength="100"
  helper-text="Enter text"
  error-text="Please enter text"
></ion-textarea>

<!-- Label and Label Position -->

<!-- Before -->
<ion-item>
  <ion-label position="floating">Label:</ion-label>
  <ion-textarea></ion-textarea>
</ion-item>

<!-- After -->
<ion-item>
  <ion-textarea label="Label:" labelPlacement="floating"></ion-textarea>
</ion-item>


<!-- Fill -->

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

<!-- After -->

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

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

<!-- Before -->
<ion-item [counter]="true">
  <ion-label position="floating">Label:</ion-label>
  <ion-textarea maxlength="100"></ion-textarea>
  <div slot="helper">Enter text</div>
  <div slot="error">Please enter text</div>
</ion-item>

<!-- After -->

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

<ion-textarea
  label="Label:"
  [counter]="true"
  maxlength="100"
  helperText="Enter text"
  errorText="Please enter text"
></ion-textarea>

{/* Label and Label Position */}

{/* Before */}
<IonItem>
  <IonLabel position="floating">Label:</IonLabel>
  <IonTextarea></IonTextarea>
</IonItem>

{/* After */}
<IonItem>
  <IonTextarea label="Label:" labelPlacement="floating"></IonTextarea>
</IonItem>


{/* Fill */}

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

{/* After */}

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

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

{/* Before */}
<IonItem counter={true}>
  <IonLabel position="floating">Label:</IonLabel>
  <IonTextarea maxlength="100"></IonTextarea>
  <div slot="helper">Enter text</div>
  <div slot="error">Please enter text</div>
</IonItem>

{/* After */}

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

<IonTextarea
  label="Label:"
  counter={true}
  maxlength="100"
  helperText="Enter text"
  errorText="Please enter text"
></IonTextarea>

<!-- Label and Label Position -->

<!-- Before -->
<ion-item>
  <ion-label position="floating">Label:</ion-label>
  <ion-textarea></ion-textarea>
</ion-item>

<!-- After -->
<ion-item>
  <ion-textarea label="Label:" label-placement="floating"></ion-textarea>
</ion-item>


<!-- Fill -->

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

<!-- After -->

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

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

<!-- Before -->
<ion-item :counter="true">
  <ion-label position="floating">Label:</ion-label>
  <ion-textarea maxlength="100"></ion-textarea>
  <div slot="helper">Enter text</div>
  <div slot="error">Please enter text</div>
</ion-item>

<!-- After -->

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

<ion-textarea
  label="Label:"
  :counter="true"
  maxlength="100"
  helper-text="Enter text"
  error-text="Please enter text"
></ion-textarea>

レガシー構文の使用

Ionicは、アプリが最新のtextarea構文を使用しているかどうかをヒューリスティックで検出します。場合によっては、レガシーな構文を使い続けることが望ましいこともあります。開発者は、ion-textareaのlegacyプロパティをtrueに設定することで、そのインスタンスのtextareaがレガシー構文を使用するように強制できます。

テーマ

Interfaces

TextareaChangeEventDetail

interface TextareaChangeEventDetail {
  value?: string | null;
}

TextareaCustomEvent

必須ではありませんが、このコンポーネントから発行される Ionic イベントでより強く型付けを行うために、CustomEvent インターフェースの代わりにこのインターフェースを使用することが可能です。

interface TextareaCustomEvent extends CustomEvent {
  detail: TextareaChangeEventDetail;
  target: HTMLIonTextareaElement;
}

プロパティ

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	`undefined`
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は、どのプラットフォームのスタイルを使用するかを決定します。
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`

イベント

Name	Description	Bubbles
`ionBlur`	Inputのフォーカスが外れたときに発行されます。	`true`
`ionChange`	The `ionChange` event is fired when the user modifies the textarea's value. Unlike the `ionInput` event, the `ionChange` event is fired when the element loses focus after its value has been modified. This event will not emit when programmatically setting the `value` property.	`true`
`ionFocus`	Inputにフォーカスが当たったときに発行されます。	`true`
`ionInput`	ionInput `イベントは、ユーザが textarea の値を変更するたびに発生する。ionChange` イベントとは異なり、 `ionInput` イベントは textarea の値が変更されるたびに発生する。これは通常、ユーザがキーを入力するたびに発生する。 clearOnEdit`が有効な場合、ユーザが textarea をクリアするためにキーダウンを行うと、`ionInput` イベントが発生する。	`true`

メソッド

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カスタムプロパティ

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 の前端に表示する内容。(実験的)

基本的な使い方​

Labels​

Label Placement​

Label Slot (実験的)​

No Visible Label​

Filled Textareas​

Helper & Error Text​

Textarea Counter​

Autogrow​

Clear on Edit​

Start and End Slots (experimental)​

レガシーtextarea構文からの移行​

最新の構文の使い方​

レガシー構文の使用​

テーマ​

Interfaces​

TextareaChangeEventDetail​

TextareaCustomEvent​

プロパティ​

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​

イベント​

メソッド​

getInputElement​

setFocus​

CSS Shadow Parts​

CSSカスタムプロパティ​

Slots​

Contents