テキスト フィールド コンポーネントは、ユーザーが入力した情報を収集するために使用されます。


確認したいコンポーネントを下から選び、利用できる props、slots、events、functions を確認してください。




テキストフィールドは disabled または readonly にすることができます。

dense propでテキストフィールドの高さを低くできます。

テキストフィールドの前後(内側・外側それぞれ)にprepend-icon, append-iconおよびappend-outer-iconpropで、指定したアイコンを追加できます。


文字制限をユーザーに通知するには、'counter' propを使用します。カウンタはそれ自体ではバリデーションを実行しません。バリデーションするには内蔵システムまたはサード パーティのライブラリとペアリングする必要があります。通常のテキスト フィールド、ボックスフィールド、またはアウトラインテキストフィールドで使用できます。

hide-detailsauto に設定されている場合、表示するメッセージ(ヒント、エラーメッセージ、カウンタ値など) がある場合にのみ表示されます。

パスワード入力欄は 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は、ソロモードをサポートしていません

prefixsuffix プロパティを使用すると、テキストフィールドの横にインラインの固定テキストを追加することができます。

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.

準備はいいですか? 以下から続きが読めます。

Caught a mistake or want to contribute to the documentation? Edit Layout on GitHub!