TextFieldテキストフィールド

テキストフィールドコンポーネントは、ユーザーがページ上でテキストを入力できるようにし、通常はフォームやダイアログで使用されます。

使用方法

コンポーネントを必要に応じてインポートします：

import 'mdui/components/text-field.js';

コンポーネントの TypeScript 型を必要に応じてインポートします：

import type { TextField } from 'mdui/components/text-field.js';

使用例：

<mdui-text-field label="Text Field"></mdui-text-field>

例

形状

variant 属性を使用してテキストフィールドの形状を設定します。

<mdui-text-field variant="filled" label="Text Field"></mdui-text-field>

<br/><br/>

<mdui-text-field variant="outlined" label="Text Field"></mdui-text-field>

ソース

補助テキスト

label 属性を使用してテキストフィールドの上にラベルテキストを設定します。

<mdui-text-field label="Text Field"></mdui-text-field>

ソース

placeholder 属性を使用して、値がない場合のプレースホルダーテキストを設定します。

<mdui-text-field label="Text Field" placeholder="Placeholder"></mdui-text-field>

ソース

helper 属性を使用してテキストフィールドの下部にヘルプテキストを設定します。helper スロットを使用してヘルプテキストを設定することもできます。helper-on-focus 属性を追加すると、入力フィールドにフォーカスされている時のみヘルプテキストが表示されます。

Supporting text

<mdui-text-field label="Text Field" helper="Supporting text"></mdui-text-field>

<mdui-text-field label="Text Field">
  <span slot="helper" style="color: blue">Supporting text</span>
</mdui-text-field>

<mdui-text-field label="Text Field" helper="Supporting text" helper-on-focus></mdui-text-field>

ソース

クリア可能

clearable 属性を追加すると、テキストフィールドに値がある場合、右側にクリアボタンが追加されます。

<mdui-text-field clearable label="Text Field" value="Input Text"></mdui-text-field>

ソース

テキスト右揃え

end-aligned 属性を追加すると、テキストを右揃えにできます。

<mdui-text-field end-aligned label="Text Field" value="Input Text"></mdui-text-field>

ソース

プレフィックスとサフィックスのテキストおよびアイコン

icon と end-icon 属性を設定することで、テキストフィールドの左側と右側に Material Icons アイコンを追加できます。icon と end-icon スロットを使用してテキストフィールドの左側と右側に要素を追加することもできます。

<mdui-text-field icon="search" end-icon="mic" label="Text Field"></mdui-text-field>

<br/><br/>

<mdui-text-field label="Text Field">
  <mdui-button-icon slot="icon" icon="search"></mdui-button-icon>
  <mdui-button-icon slot="end-icon" icon="mic"></mdui-button-icon>
</mdui-text-field>

ソース

prefix と suffix 属性を設定することで、テキストフィールドの左側と右側にテキストを追加できます。prefix と suffix スロットを使用してテキストフィールドの左側と右側にテキスト要素を追加することもできます。これらのテキストは、テキストフィールドにフォーカスされているか値がある場合にのみ表示されます。

$ /100

<mdui-text-field prefix="$" suffix="/100" label="Text Field"></mdui-text-field>

<br/><br/>

<mdui-text-field label="Text Field">
  <span slot="prefix" style="color: blue">$</span>
  <span slot="suffix" style="color: blue">/100</span>
</mdui-text-field>

ソース

読み取り専用モード

readonly 属性を追加することで、テキストフィールドを読み取り専用モードに設定できます。

<mdui-text-field readonly label="Text Field" value="Input Text"></mdui-text-field>

ソース

無効状態

disabled 属性を追加することで、テキストフィールドを無効にできます。

<mdui-text-field disabled label="Text Field" value="Input Text"></mdui-text-field>

ソース

複数行テキストフィールド

rows 属性を使用して、複数行テキストフィールドの行数を設定できます。

<mdui-text-field rows="3" label="Text Field"></mdui-text-field>

ソース

autosize 属性を追加すると、入力内容の長さに応じてテキストフィールドの高さを自動調整できます。min-rows と max-rows 属性を使用して、自動調整時の最小行数と最大行数を指定できます。

<mdui-text-field autosize label="Text Field"></mdui-text-field>

<br/><br/>

<mdui-text-field autosize min-rows="2" max-rows="5" label="Text Field"></mdui-text-field>

ソース

文字数カウンター

maxlength 属性で最大文字数を設定した場合、counter 属性を追加するとテキストフィールドの下に文字数カウンターが表示されます。

<mdui-text-field maxlength="20" counter label="Text Field"></mdui-text-field>

ソース

パスワードフィールド

type="password" の場合、toggle-password 属性を追加するとテキストフィールドの右側にパスワードの可視性を切り替えるボタンが追加されます。

<mdui-text-field type="password" toggle-password label="Text Field"></mdui-text-field>

ソース

API

プロパティ

HTML 属性	JavaScript プロパティ	型	デフォルト値
`variant`	`variant`	`'filled' \| 'outlined'`	`'filled'`
テキストフィールドの形状です。既定値は `filled` です。次の値を指定します： `filled`：背景色付きテキストフィールド。視覚的な強調度が高いです。 `outlined`：枠線付きテキストフィールド。視覚的な強調度が低いです。
`type`	`type`	`'text' \| 'number' \| 'password' \| 'url' \| 'email' \| 'search' \| 'tel' \| 'hidden' \| 'date' \| 'datetime-local' \| 'month' \| 'time' \| 'week'`	`'text'`
テキストフィールドの入力タイプです。既定値は `text` です。次の値を指定します： `text`：既定値。テキストフィールド `number`：数値のみ入力可能。動的キーボードを持つデバイスでは数字キーボードが表示されます `password`：パスワード入力用。値はマスクされます `url`：URL入力用。URL形式を検証します。動的キーボードをサポートするデバイスでは対応するキーボードが表示されます `email`：メールアドレス入力用。メール形式を検証します。動的キーボードをサポートするデバイスでは対応するキーボードが表示されます `search`：検索ボックス用。動的キーボードを持つデバイスでは、Enterキーのアイコンが検索アイコンに変わります `tel`：電話番号入力用。動的キーボードを持つデバイスでは電話番号キーボードが表示されます `hidden`：コントロールを非表示にしますが、その値はサーバーに送信されます `date`：日付入力コントロール（年、月、日。時間は含みません）。サポートされているブラウザでは、アクティブ時に日付ピッカーまたは年月日の数字ホイールが開きます `datetime-local`：日付と時刻の入力コントロール。タイムゾーンは含みません。サポートされているブラウザでは、アクティブ時に日付ピッカーまたは年月日の数字ホイールが開きます `month`：年と月の入力コントロール。タイムゾーンなし `time`：時刻入力用コントロール。タイムゾーンは含みません `week`：年と週番号で構成される日付を入力するためのコントロール。タイムゾーンなし
`name`	`name`	`string`	`''`
テキストフィールドの名前です。フォームデータと共に送信されます。
`value`	`value`	`string`	`''`
テキストフィールドの値です。フォームデータと共に送信されます。
	`defaultValue`	`string`	`''`
デフォルト値です。フォームをリセットすると、このデフォルト値にリセットされます。この属性はJavaScriptプロパティでのみ設定できます。
`label`	`label`	`string`	-
ラベルテキストです。
`placeholder`	`placeholder`	`string`	-
プレースホルダーテキストです。
`helper`	`helper`	`string`	-
テキストフィールド下部のヘルプテキストです。`slot="helper"` で設定することもできます。
`helper-on-focus`	`helperOnFocus`	`boolean`	`false`
フォーカスを取得したときのみ、下部のヘルプテキストを表示するかどうかを指定します。
`clearable`	`clearable`	`boolean`	`false`
テキストフィールドの内容をクリア可能にするかどうかを指定します。
`clear-icon`	`clearIcon`	`string`	-
テキストフィールドがクリア可能な場合に、右側に表示されるクリアボタンのMaterial Iconsアイコン名です。`slot="clear-icon"` で設定することもできます。
`end-aligned`	`endAligned`	`boolean`	`false`
テキストを右揃えにするかどうかを指定します。
`prefix`	`prefix`	`string`	-
テキストフィールドの接頭辞テキストです。テキストフィールドにフォーカスがあるか、値がある場合にのみ表示されます。`slot="prefix"` で設定することもできます。
`suffix`	`suffix`	`string`	-
テキストフィールドの接尾辞テキストです。テキストフィールドにフォーカスがあるか、値がある場合にのみ表示されます。`slot="suffix"` で設定することもできます。
`icon`	`icon`	`string`	-
テキストフィールドの接頭辞アイコンのMaterial Iconsアイコン名です。`slot="icon"` で設定することもできます。
`end-icon`	`endIcon`	`string`	-
テキストフィールドの接尾辞アイコンのMaterial Iconsアイコン名です。`slot="end-icon"` で設定することもできます。
`error-icon`	`errorIcon`	`string`	-
フォームフィールドの検証に失敗した場合に、テキストフィールドの右側に表示されるMaterial Iconsアイコン名です。`slot="error-icon"` で設定することもできます。
`form`	`form`	`string`	-
関連付ける `<form>` 要素です。この属性値には、同一ページ内の `<form>` 要素の `id` を指定する必要があります。この属性が指定されていない場合、この要素は `<form>` 要素の子要素である必要があります。この属性を使用すると、要素を `<form>` 要素の子要素だけでなく、ページ上の任意の場所に配置できます。
`readonly`	`readonly`	`boolean`	`false`
読み取り専用モードにするかどうかを指定します。
`disabled`	`disabled`	`boolean`	`false`
入力フィールドを無効にするかどうかを指定します。
`required`	`required`	`boolean`	`false`
フォーム送信時に、このフィールドを必須にするかどうかを指定します。
`rows`	`rows`	`number`	-
テキストフィールドの固定表示行数です。
`autosize`	`autosize`	`boolean`	`false`
入力内容に応じてテキストフィールドの高さを自動調整するかどうかを指定します。
`min-rows`	`minRows`	`number`	-
`autosize` が `true` の場合の、テキストフィールドの最小行数です。
`max-rows`	`maxRows`	`number`	-
`autosize` が `true` の場合の、テキストフィールドの最大行数です。
`minlength`	`minlength`	`number`	-
入力可能な最小文字数です。
`maxlength`	`maxlength`	`number`	-
入力可能な最大文字数です。
`counter`	`counter`	`boolean`	`false`
文字数カウンターを表示するかどうかを指定します。`maxlength` が指定されている場合のみ有効です。
`min`	`min`	`number`	-
`type` が `number` の場合に、入力可能な最小値です。
`max`	`max`	`number`	-
`type` が `number` の場合に、入力可能な最大値です。
`step`	`step`	`number`	-
`type` が `number` の場合の、数値の増減ステップです。
`pattern`	`pattern`	`string`	-
フォーム検証に使用する正規表現です。
`toggle-password`	`togglePassword`	`boolean`	`false`
`type` が `password` の場合、この属性を設定すると、平文と暗号文を切り替えるための切替ボタンが追加されます。
`show-password-icon`	`showPasswordIcon`	`string`	-
パスワード切替ボタンのMaterial Iconsアイコンです。パスワードが平文の場合に表示されます。`slot="show-password-icon"` で設定することもできます。
`hide-password-icon`	`hidePasswordIcon`	`string`	-
パスワード切替ボタンのMaterial Iconsアイコンです。パスワードが暗号文の場合に表示されます。`slot="hide-password-icon"` で設定することもできます。
`autocapitalize`	`autocapitalize`	`'none' \| 'sentences' \| 'words' \| 'characters'`	-
iOSの非標準属性です。テキストの最初の文字を自動的に大文字にするかどうかを制御します。iOS5以降で有効です。次の値を指定します： `none`：先頭文字の大文字化を無効 `sentences`：文の先頭を大文字にする `words`：単語の先頭を大文字にする `characters`：すべての文字を大文字にする
`autocorrect`	`autocorrect`	`string`	-
`input` 要素の `autocorrect` 属性です。
`autocomplete`	`autocomplete`	`string`	-
`input` 要素の `autocomplete` 属性です。
`enterkeyhint`	`enterkeyhint`	`'enter' \| 'done' \| 'go' \| 'next' \| 'previous' \| 'search' \| 'send'`	-
`input` 要素の `enterkeyhint` 属性です。仮想キーボードのEnterキーに表示されるテキストまたはアイコンをカスタマイズするために使用します。具体的な表示は、ユーザーのデバイスと言語によって異なります。次の値を指定します： `enter`：新しい行を挿入 `done`：入力を完了し、仮想キーボードを閉じる `go`：入力テキストのターゲットに移動 `next`：次の入力項目に移動 `previous`：前の入力項目に移動 `search`：検索結果に移動 `send`：テキスト情報を送信
`spellcheck`	`spellcheck`	`boolean`	`false`
スペルチェックを有効にするかどうかを指定します。
`inputmode`	`inputmode`	`'none' \| 'text' \| 'decimal' \| 'numeric' \| 'tel' \| 'search' \| 'email' \| 'url'`	-
`input` 要素の `inputmode` 属性です。仮想キーボードのタイプをカスタマイズするために使用します。次の値を指定します： `none`：仮想キーボードを表示しない。独自のキーボード入力コントロールを実装する場合に便利です。 `text`：標準テキスト入力キーボード `decimal`：小数入力キーボード。数字の他に小数点 `.` や桁区切りのカンマ `,` がある場合があります `numeric`：0-9の数字キーボードを表示 `tel`：電話番号キーボード。0-9の数字、アスタリスク `*`、シャープ `#` キーを含みます `search`：検索入力用に最適化された仮想キーボード。送信ボタンには通常 `search` または「検索」と表示されます `email`：メールアドレス入力用に最適化された仮想キーボード。通常、`@` や `.` などのキーがあります `url`：URL入力用に最適化された仮想キーボード。通常、`.`、`/`、`#` などのキーがあります
	`validity`	`ValidityState`	-
フォーム検証ステータスを表す `ValidityState` オブジェクトです。詳細は `ValidityState` を参照してください。
	`validationMessage`	`string`	-
フォーム検証に合格しなかった場合、このプロパティにはエラーメッセージが設定されます。検証に合格した場合は空の文字列になります。
	`valueAsNumber`	`number`	-
現在の値を `number` 型で取得するか、`number` 型の値を設定します。値を `number` 型に変換できない場合は、`NaN` を返します。
`autofocus`	`autofocus`	`boolean`	`false`
ページ読み込み完了後、自動的にフォーカスを取得するかどうかを指定します。
`tabindex`	`tabIndex`	`number`	-
Tab キーによるフォーカス移動時の、要素の順序を指定します。

メソッド

名前	パラメーター	戻り値
`select`		`void`
テキストフィールド内のテキストを選択します。
`setSelectionRange`	`start: number` `end: number` `direction: 'forward' \| 'backward' \| 'none'`	`void`
テキストフィールド内の特定の範囲の内容を選択します。
`setRangeText`	`replacement: string` `start: number` `end: number` `selectMode: 'select' \| 'start' \| 'end' \| 'preserve'`	`void`
テキストフィールド内の特定の範囲のテキストを新しいテキストに置き換えます。
`checkValidity`		`boolean`
フォームフィールドが検証に合格するかどうかをチェックします。合格しない場合は `false` を返し、`invalid` イベントをトリガーします。合格した場合は `true` を返します。
`reportValidity`		`boolean`
フォームフィールドが検証に合格するかどうかをチェックします。合格しない場合は `false` を返し、`invalid` イベントをトリガーします。合格した場合は `true` を返します。検証に合格しなかった場合は、コンポーネントに検証失敗のエラーメッセージも表示されます。
`setCustomValidity`	`message: string`	`void`
カスタムのエラーメッセージを設定します。このテキストが空でない限り、フィールドが検証に合格していないと見なされます。
`click`		`void`
要素のマウスクリックをシミュレートします。
`focus`	`options: FocusOptions` (オプション)	`void`
現在の要素にフォーカスを設定します。オプションとして、以下のプロパティを持つオブジェクトを渡すことができます： `preventScroll`：デフォルトでは、要素がフォーカスを取得すると、その要素がビュー内に表示されるようにページがスクロールします。ページのスクロールを防ぐには、このプロパティを `true` に設定します。
`blur`		`void`
現在の要素からフォーカスを外します。

イベント

名前
`focus`
フォーカスを取得したときに発生します。
`blur`
フォーカスを失ったときに発生します。
`change`
テキストフィールドの値が変更され、フォーカスを失ったときに発生します。
`input`
テキストフィールドの値が変更されたときに発生します。
`invalid`
フォームフィールドの検証に合格しなかったときに発生します。
`clear`
`clearable` 属性によって生成されたクリアボタンがクリックされたときに発生します。`event.preventDefault()` を呼び出すことで、テキストフィールドがクリアされるのを防ぐことができます。

Slots

名前
`icon`
左側のアイコン
`end-icon`
右側のアイコン
`error-icon`
検証失敗状態の右側のアイコン
`prefix`
左側のテキスト
`suffix`
右側のテキスト
`clear-button`
クリアボタン
`clear-icon`
クリアボタン内のアイコン
`toggle-password-button`
パスワード表示状態切替ボタン
`show-password-icon`
パスワード表示状態で、パスワード表示状態切替ボタン内に表示されるアイコン
`hide-password-icon`
パスワード非表示状態で、パスワード表示状態切替ボタン内に表示されるアイコン
`helper`
下部のヘルプテキスト

CSS Parts

名前
`container`
テキストフィールドコンテナ
`icon`
左側のアイコン
`end-icon`
右側のアイコン
`error-icon`
検証失敗状態の右側のアイコン
`prefix`
左側のテキスト
`suffix`
右側のテキスト
`label`
上部のラベルテキスト
`input`
内部の `<input>` または `<textarea>` 要素
`clear-button`
クリアボタン
`clear-icon`
クリアボタン内のアイコン
`toggle-password-button`
パスワード表示状態切替ボタン
`show-password-icon`
パスワード表示状態で、パスワード表示状態切替ボタン内のアイコン
`hide-password-icon`
パスワード非表示状態で、パスワード表示状態切替ボタン内のアイコン
`supporting`
下部補助情報コンテナ（helper、error、counter を含む）
`helper`
下部のヘルプテキスト
`error`
下部のエラー説明テキスト
`counter`
下部右側の文字数カウンター

前の章

Tabs タブ

次の章

Tooltip ツールチップ