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	If `true`, the textarea container will grow and shrink based on the contents of the textarea.
Attribute	`auto-grow`
Type	`boolean`
Default	`false`

autocapitalize

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	`'none'`

autofocus

Description	Sets the `autofocus` attribute on the native input element. This may not be sufficient for the element to be focused on page load. See managing focus for more information.
Attribute	`autofocus`
Type	`boolean`
Default	`false`

clearOnEdit

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

color

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`

cols

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

counter

Description	If `true`, a character counter will display the ratio of characters used and the total character limit. Developers must also set the `maxlength` property for the counter to be calculated correctly.
Attribute	`counter`
Type	`boolean`
Default	`false`

counterFormatter

Description	A callback used to format the counter text. By default the counter text is set to "itemLength / maxLength". See https://ionicframework.com/docs/troubleshooting/runtime#accessing-this if you need to access `this` from within the callback.
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	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`

errorText

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

fill

Description	The fill for the item. If `"solid"` the item will have a background. If `"outline"` the item will be transparent with a border. Only available in `md` mode.
Attribute	`fill`
Type	`"outline" ｜ "solid" ｜ undefined`
Default	`undefined`

helperText

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

inputmode

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`

label

Description	The visible label associated with the textarea. Use this if you need to render a plaintext label. The `label` property will take priority over the `label` slot if both are used.
Attribute	`label`
Type	`string ｜ undefined`
Default	`undefined`

labelPlacement

Description	Where to place the label relative to the textarea. `"start"`: The label will appear to the left of the textarea in LTR and to the right in RTL. `"end"`: The label will appear to the right of the textarea in LTR and to the left in RTL. `"floating"`: The label will appear smaller and above the textarea when the textarea is focused or it has a value. Otherwise it will appear on top of the textarea. `"stacked"`: The label will appear smaller and above the textarea regardless even when the textarea is blurred or has no value. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("...").
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`	The `ionInput` event is fired each time the user modifies the textarea's value. Unlike the `ionChange` event, the `ionInput` event is fired for each alteration to the textarea's value. This typically happens for each keystroke as the user types. When `clearOnEdit` is enabled, the `ionInput` event will be fired when the user clears the textarea by performing a keydown event.	`true`

メソッド

getInputElement

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

setFocus

Description	Sets focus on the native `textarea` in `ion-textarea`. Use this method instead of the global `textarea.focus()`. See managing focus for more information.
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