InputTextは、テーマ機能を持つ標準のinput要素の拡張です。
import InputText from 'primevue/inputtext';
InputTextは、v-modelプロパティを持つ制御された入力として使用されます。
<InputText type="text" v-model="value" />
フォーカス時に、入力フィールドの上にフロートラベルが表示されます。詳細はFloatLabelドキュメントを参照してください。
<FloatLabel>
<InputText id="username" v-model="value" />
<label for="username">Username</label>
</FloatLabel>
InputTextは、標準の代替として、smallおよびlargeサイズを提供します。
<InputText v-model="value1" type="text" size="small" placeholder="Small" />
<InputText v-model="value2" type="text" placeholder="Normal" />
<InputText v-model="value3" type="text" size="large" placeholder="Large" />
セマンティックなsmallタグでアドバイザリーテキストを定義できます。
<div class="flex flex-col gap-2">
<label for="username">Username</label>
<InputText id="username" v-model="value" aria-describedby="username-help" />
<small id="username-help">Enter your username to reset your password.</small>
</div>
デフォルトのoutlinedスタイルよりも視覚的に強調してコンポーネントを表示するには、variantプロパティをfilledとして指定します。
<InputText type="text" v-model="value" variant="filled" />
検証の失敗を示すために、invalidプロパティを使用して無効状態を表示します。フォーム検証ライブラリと統合する場合にこのスタイルを使用できます。
<InputText v-model="value" :invalid="value === null" />
disabledが存在する場合、要素を編集したり、フォーカスを当てたりすることはできません。
<InputText v-model="value" disabled placeholder="Disabled" />
InputTextコンポーネントは、渡されたプロパティを暗黙的に含むネイティブの入力要素をレンダリングします。コンポーネントを説明する値は、idプロパティと組み合わせたlabelタグを使用するか、aria-labelledby、aria-labelプロパティを使用して提供できます。
<label for="firstname">Firstname</label>
<InputText id="firstname" />
<span id="lastname">Lastname</span>
<InputText aria-labelledby="lastname" />
<InputText aria-label="Age"/>
| キー | 機能 |
|---|---|
| tab | 入力をフォーカスします。 |