Vue InputText renders a text field to enter data. It supports Vue 3 with PrimeVue 3 and Vue 2 with PrimeVue 2.
Setup
Refer to PrimeVue setup documentation for download and installation steps for your environment such as Vue CLI, Vite or browser.
Import
import InputText from 'primevue/inputtext';
Getting Started
A model can be bound using the standard v-model directive.
<InputText type="text" v-model="value" />
Float Label
A floating label is implemented by wrapping the input and the label inside a container having .p-float-label style class.
<span class="p-float-label">
<InputText id="username" type="text" v-model="value" />
<label for="username">Username</label>
</span>
Icons
An icon can be integrated within an input field by wrapping the input and the icon with an element having p-input-icon-right and p-input-icon-left classes depending on the icon location.
<span class="p-input-icon-left">
<i class="pi pi-search" />
<InputText type="text" v-model="value1" placeholder="Search" />
</span>
<span class="p-input-icon-right">
<InputText type="text" v-model="value2" />
<i class="pi pi-spin pi-spinner" />
</span>
<span class="p-input-icon-left p-input-icon-right">
<i class="pi pi-search" />
<InputText type="text" v-model="value3" />
<i class="pi pi-spin pi-spinner" />
</span>
Sizes
2 more sizes are available in addition to a regular input, for a smaller input add p-inputtext-sm and for a larger one, use p-inputtext-lg. Note that these classes are mainly be used to change the size of a particular field, for global scaling see the theming page.
<InputText type="text" class="p-inputtext-sm" placeholder="Small" />
<InputText type="text" placeholder="Normal" />
<InputText type="text" class="p-inputtext-lg" placeholder="Large" />
Instead of repeating the scale classes for each input, sizing can also be applied to a group by adding the class to a container element so that descendant inputs share the same style easier.
<div class="p-inputtext-sm">
<InputText />
<InputNumber />
<InputMask />
</div>
Outlined vs Filled
Input fields come in two styles, default is outlined with borders around the field whereas filled alternative adds a background color to the field. Applying p-input-filled to an ancestor of an input enables the filled style. If you prefer to use filled inputs in the entire application, use a global container such as document body or the application element to apply the style class.
<div class="p-input-filled">
<InputText type="text" />
<InputText type="text" />
<InputText type="text" />
</div>
Theming
InputText supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the Designer tool.
Resources
Visit the PrimeVue InputText showcase for demos and documentation.