V3 has reached EOL, Upgrade to PrimeVue 4

InputText

InputText is an extension to standard input element with theming.

Import # 


import InputText from 'primevue/inputtext';

Basic #

InputText is used as a controlled input with v-model properties.


<InputText type="text" v-model="value" />

HelpText #

An advisory text can be defined with the semantic small tag.

Enter your username to reset your password.

<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>

Float Label #

A floating label appears on top of the input field when focused. Visit FloatLabel documentation for more information.


<FloatLabel>
    <InputText id="username" v-model="value" />
    <label for="username">Username</label>
</FloatLabel>

Filled #

Specify the variant property as filled to display the component with a higher visual emphasis than the default outlined style.


<InputText type="text" v-model="value" variant="filled" />

Invalid #

Invalid state is displayed using the invalid prop to indicate a failed validation. You can use this style when integrating with form validation libraries.


<InputText v-model="value" invalid />

Disabled #

When disabled is present, the element cannot be edited and focused.


<InputText v-model="value" disabled placeholder="Disabled" />

Accessibility #

Screen Reader

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"/>

Keyboard Support

KeyFunction
tabMoves focus to the input.
PrimeVue 3.53.1 on Vue 3 by PrimeTek