import InputText from 'primevue/inputtext';
<script src="https://unpkg.com/primevue@^3/core/core.min.js"></script>
A model can be bound using the standard v-model directive.
<InputText type="text" v-model="value" />
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>
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>
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
<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>
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>
InputText passes any valid attribute to the underlying input element, additional attribute is the following.
| Name | Type | Default | Description |
|---|---|---|---|
| modelValue | any | null | Value of the component. |
Any valid event such as focus, blur and input are passed to the underlying input element.
Following is the list of structural style classes, for theming classes visit
| Name | Element |
|---|---|
| p-inputtext | Input element |
| p-inputtext-sm | Smaller input element |
| p-inputtext-lg | Larger input element |
| p-inputtext-filled | Filled input style. |
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. |
None.