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 | 入力をフォーカスします。 |