ショップ

企業向け

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

単純なテキストフィールドはプレースホルダやラベルがあります。

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

以下に、簡単な例から複雑な例まで示します。

シングルライン・テキストフィールドは、フォーカスされた時や入力済のとき、ラベルをフロートしません。

shapedテキストフィールドは、アウトラインが付いている(outlinedprop指定)場合は丸められ、塗りつぶされた(filledprop指定)場合は境界線半径border-radiusが大きくなります。

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

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

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

clearableで消去可能を設定した場合は、clear-iconpropでアイコンをカスタマイズできます。

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

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

A password input can be used with an appended icon and callback to control the visibility.

テキスト フィールドは、ボックスデザインと共に使用できます。このモードでは、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.

You can add masking functionality using a 3rd party library such as vue-the-mask.

テキスト フィールドの 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!