ion-textarea

scoped

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つのステップがあります。

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

JavaScript

<!-- 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>

Angular

<!-- 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>

React

{/* 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>

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>

レガシー構文の使用

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	onChange イベントは、ユーザが textarea の値を変更したときに発生する。ionInput イベントとは異なり、ionChange イベントは値が変更された後に要素のフォーカスが外れたときに発生する。	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テキストの不透明度

Slots

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