InputText is an extension to standard input element with theming.
import InputText from 'primevue/inputtext';
InputText is used as a controlled input with v-model properties.
<InputText type="text" v-model="value" />
Icons can be placed inside an input element by wrapping both the input and the icon with an element that has either .p-input-icon-left or .p-input-icon-right class.
<span class="p-input-icon-left">
<i class="pi pi-search" />
<InputText v-model="value1" placeholder="Search" />
</span>
<span class="p-input-icon-right">
<i class="pi pi-spin pi-spinner" />
<InputText v-model="value2" />
</span>
Apply .p-input-sm to reduce the size of the input element or .p-input-lg to enlarge it.
<InputText v-model="value1" type="text" class="p-inputtext-sm" placeholder="Small" />
<InputText v-model="value2" type="text" placeholder="Normal" />
<InputText v-model="value3" type="text" class="p-inputtext-lg" placeholder="Large" />
An advisory text can be defined with the semantic small tag.
<div class="flex flex-column 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>
A floating label appears on top of the input field when focused.
<span class="p-float-label">
<InputText id="username" v-model="value" />
<label for="username">Username</label>
</span>
Invalid state style is added using the .p-invalid class to indicate a failed validation.
<InputText v-model="value" class="p-invalid" />
When disabled is present, the element cannot be edited and focused.
<InputText v-model="value" disabled placeholder="Disabled" />
Compatibility with popular Vue form libraries.
VeeValidate is a popular library for handling forms in Vue.
<template>
<div class="card flex justify-content-center">
<form @submit="onSubmit" class="flex flex-column gap-2">
<span class="p-float-label">
<InputText id="value" v-model="value" type="text" :class="{ 'p-invalid': errorMessage }" aria-describedby="text-error" />
<label for="value">Name - Surname</label>
</span>
<small class="p-error" id="text-error">{{ errorMessage || ' ' }}</small>
<Button type="submit" label="Submit" />
</form>
<Toast />
</div>
</template>
Following is the list of structural style classes, for theming classes visit theming page.
| Name | Element |
|---|---|
| p-inputtext | Input element |
InputText component renders a native input element that implicitly includes any passed prop. Value to describe the component can either be provided via label tag combined with id prop or using aria-labelledby, aria-label props.
<label for="firstname">Firstname</label>
<InputText id="firstname" />
<span id="lastname">Lastname</span>
<InputText aria-labelledby="lastname" />
<InputText aria-label="Age"/>
| Key | Function |
|---|---|
| tab | Moves focus to the input. |