Textarea

Textarea adds styling and autoResize functionality to standard textarea element.

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

PREVIEW

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

basic-demo

When autoResize is enabled, textarea grows instead of displaying a scrollbar.

autoresize-demo

A floating label appears on top of the input field when focused. 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

Textarea provides small and large sizes as alternatives to the base.

sizes-demo

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

fluid-demo

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

filled-demo

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

disabled-demo

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

invalid-demo

Textarea integrates seamlessly with the PrimeVue Forms library.

forms-demo

Screen Reader

Textarea component renders a native textarea 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