テキスト フィールド コンポーネントは、ユーザーが入力した情報を収集するために使用されます。
以下に、簡単な例から複雑な例まで示します。
シングルライン・テキストフィールドは、フォーカスされた時や入力済のとき、ラベルをフロートしません。
shapedテキストフィールドは、アウトラインが付いている（outlinedprop指定）場合は丸められ、塗りつぶされた（filledprop指定）場合は境界線半径border-radiusが大きくなります。
テキストフィールドは disabled または readonly にすることができます。
dense propでテキストフィールドの高さを低くできます。
テキストフィールドの前後（内側・外側それぞれ）にprepend-icon, append-iconおよびappend-outer-iconpropで、指定したアイコンを追加できます。
clearableで消去可能を設定した場合は、clear-iconpropでアイコンをカスタマイズできます。
文字制限をユーザーに通知するには、'counter' propを使用します。カウンタはそれ自体ではバリデーションを実行しません。バリデーションするには内蔵システムまたはサード パーティのライブラリとペアリングする必要があります。通常のテキスト フィールド、ボックスフィールド、またはアウトラインテキストフィールドで使用できます。
hide-detailsがauto に設定されている場合、表示するメッセージ(ヒント、エラーメッセージ、カウンタ値など) がある場合にのみ表示されます。
パスワード入力欄は appended-icon および可視性を管理するコールバックと共に使われます。
テキスト フィールドは、ボックスデザインと共に使用できます。このモードでは、append および prepend アイコンprop はサポートされません。
テキストフィールドは、ソロデザインで使用できます。
テキストフィールドは、アウトラインデザインで使用できます。
You can optionally change a text field into any color in the Material design palette. Below is an example implementation of a custom form with validation.
テキスト フィールドの hint プロパティは、テキスト フィールドの下に指定された文字列を追加します。persistent-hint を使用すると、テキストフィールドがフォーカスされていないときでもヒントが表示されます。hint propは、ソロモードをサポートしていません。
prefix と suffix プロパティを使用すると、テキストフィールドの横にインラインの固定テキストを追加することができます。
click:prepend, click:append, click:append-outer, and click:clear will be emitted when you click on the respective icon. Note that these events will not be fired if the slot is used instead.
Instead of using prepend / append / append-outer icons you can use slots to extend input's functionality.
Text field label can be defined in label slot - that will allow to use HTML content
Vuetify includes simple validation through the rules prop. The prop accepts an array of callbacks. While validating rules, the current v-model value will be passed to the callback. This callback should return either true or a String, the error message.
Full width text fields allow you to create boundless inputs. In this example, we use a v-divider to separate the fields.
You can display a progress bar instead of the bottom line. You can use the default indeterminate progress having same color as the text field or designate a custom one using the progress slot
While the built in v-form or 3rd party plugin such as vuelidate or vee-validation can help streamline your validation process, you can choose to simply control it yourself.