InputText

InputText is an extension to standard input element with icons and theming.

Used as the display name across your workspace
PREVIEW

InputText is used with the v-model property for two-way value binding.

basic-demo

Combine InputText with IconField to display a clear icon that resets the value when clicked.

clearicon-demo

InputText provides small and large sizes as alternatives to the standard.

sizes-demo

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

filled-demo

The invalid state is applied using the invalid property to indicate failed validation, which can be integrated with form validation.

invalid-demo

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

disabled-demo

FloatLabel visually integrates a label with its form element. Visit FloatLabel documentation for more information.

floatlabel-demo

IftaLabel is used to create infield top aligned labels. Visit IftaLabel documentation for more information.

iftalabel-demo

The fluid prop makes the component take up the full width of its container when set to true.

fluid-demo

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

Enter your username to reset your password.
helptext-demo

InputText integrates seamlessly with the PrimeVue Forms library.

forms-demo

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.

Keyboard Support

KeyFunction
tabMoves focus to the input.
Theme Designer