import InputText from 'primevue/inputtext';
InputText is used with the v-model property.
<InputText type="text" v-model="value" />
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" />
FloatLabel visually integrates a label with its form element. Visit FloatLabel documentation for more information.
<FloatLabel>
<InputText id="over_label" v-model="value1" />
<label for="over_label">Over Label</label>
</FloatLabel>
<FloatLabel variant="in">
<InputText id="in_label" v-model="value2" variant="filled" />
<label for="in_label">In Label</label>
</FloatLabel>
<FloatLabel variant="on">
<InputText id="on_label" v-model="value3" />
<label for="on_label">On Label</label>
</FloatLabel>
IftaLabel is used to create infield top aligned labels. Visit IftaLabel documentation for more information.
<IftaLabel>
<InputText id="username" v-model="value" variant="filled" />
<label for="username">Username</label>
</IftaLabel>
InputText provides small and large sizes as alternatives to the standard.
<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" />
An advisory text can be defined with the semantic small tag.
<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>
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="value1" :invalid="!value1" />
<InputText v-model="value2" :invalid="!value2" variant="filled" />
When disabled is present, the element cannot be edited and focused.
<InputText v-model="value" disabled placeholder="Disabled" />
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. |